부트 스트랩 테이블 서버 페이지 매김 및 온라인 편집 애플리케이션 요약

먼저 부트 스트랩 테이블의 효과를 살펴 보겠습니다.

테이블은 데이터베이스에 데이터를 표시하는 데 사용됩니다. 데이터는 Ajax를 통해 서버에서로드됩니다. 동시에, 페이징 기능은 서버에서 구현하여 클라이언트 페이징과 다량의 데이터가 부족하여 발생하는 사용자 경험을 피합니다. 데이터 쿼리의 시작 및 종료 시간을 특정 시간 범위의 데이터 쿼리로 설정할 수도 있습니다. 온라인 편집 기능은 부트 스트랩 테이블을 확장하고 X- 편집 가능성을 사용하여 구현됩니다.

부트 스트랩 테이블을 사용하는 두 가지 방법이 있습니다.

1. 일반 테이블에 대한 데이터 속성 설정;

2. JavaScript를 통해 부트 스트랩 테이블 플러그인을 활성화하십시오.

첫 번째 방법은 매우 편리하지만 JS와 HTML을 분리 할 수있는 두 번째 방법을 선호하고 JS 코드를 재사용 할 수 있습니다.

부트 스트랩 테이블의 문서는 비교적 상세하지만 샘플 코드 등에 찾아야하는 특정 내용이 있습니다.

먼저 Front and Backend의 구현 코드를 게시 한 다음 자세히 소개하십시오.

프론트 데스크에서 요구하는 리소스 파일에는 주로 Bootstrap3 관련 스타일, JS, Bootstrap 테이블 관련 CSS, JS 및 X-editable Bootstrap3 기반 스타일 및 JS가 포함됩니다.

 <link rel = "스타일 시트"href = "../ 자산/부트 스트랩/css/bootstrap.min.css"> <link rel = "스타일 시트"href = "../ 자산/부트 스트랩-테이블/src/bootstrap-table.css"> 링크 rel ""Stylesheet " href = "// rawgit.com/vitalets/x-editable/mas src = "../ 자산/부트 스트랩/js/bootstrap.min.js"> </script> <script src = "../ assets/bootstrap-table/src/bootstrap-table.js"> </script> <script src = "../ 자산/부트 스트랩 ---table/src/Extensions/editable/bootstrap-table.js"> </script> <script src = "// rawgit.com/vitalets/x-edabil/mas

HTML 코드는 필요합니다

 <table id = "QueryList"> </table>

JS 코드, 시간 쿼리 관련 코드, 쿼리 시간이 올바르게 설정된 후에는 부트 스트랩 테이블 메소드를 통해 데이터가 새로 고침됩니다.

 $ ( '##submitgetData'). click (function () {$ ( '#msg'). html ( ''); var begintime_ = $ ( '#begintime'). val (); var endtime_ = $ ( '#endtime'). val (); var err = ''; if (begintime_ = '|| eNdTime_ =}'{erver = ''Query = 'er erm =' if (date.parse (endtime _). $ ( '#QueryList'). 부트 스트랩 가능 ( 'refresh'); fadeout (3000);

테이블 관련 JS :

 $ ( '#QueryList'). 부트 스트랩 가능 ({열 : [{field : 'meterMeasureHistoryId', title : 'id', true}, {field : 'value', 'value', 'value', 'value', {type : 'text', validate (value) {if ($. trim (value) == ')}}}}}}}} }, 'timeStamp', 제목 : 'time', editable : {type : 'text', validate : function (value (value) == ') {return'time be be emption} else (retud.parse (value)); formatter (value, row, index) {var s = 'a class = "href ="void (0) "> var d ='a class ="href = "javaScript : void (0)"; 'metermeasureHistoryId', 'desc', Pagination : True, Sidepagination : 'Server', Pagenumber : 1, Pagesize : 5, PageList : [5, 10, 20], QueryParams : function (params) {meterid : $ ( '#meterid'). $ ( '#begintime'). val (), endtime : $ ( '#endtime'). val ()}}, url : '/analyze/getJsonHistoryDatas'); window.operateEvents = {'click .save ': 함수 (e, value, row, index) {$ .ajax ({type : "post :", wol, row, wold : '/analyze/editmeterMeasureHistoryData', 성공 : alert ( 'modified}); }, 'click .remove': function (e, value, row, index) {$ .ajax ({type : "post", data : row, url : '/analyze/deletemetermeasureHistoryData', success : function (data) {alert ( 'delete delete'( '#QueryList'). [row.metermeasureHistoryID]}); }};

열 매개 변수는 테이블의 모든 열과 각 열의 매개 변수를 설정합니다. 필드는 JSON이 반환 한 데이터의 키 값과 부트 스트랩 테이블의 열 매개 변수에 해당합니다. 제목에 따라 표시된 열 이름; 정렬 가능한 설정은 현재 열에 따라 정렬됩니다. Formatter는 각 셀의 형식을 열에서 설정합니다. 편집 가능한 설정은 현재 열 셀의 편집 방법이며, 유효성 검증 방법을 설정할 수도 있습니다.

따라서 실제 테이블은 첫 번째 열에 따라 정렬 된 4 개의 열로 설정되며 열 2 및 3 열을 편집 할 수 있고 유형은 텍스트로 설정되며 다른 유형을 필요에 따라 사용할 수 있습니다. 두 번째 열 검증 데이터는 비어있을 수 없으며 세 번째 열 검증 입력 값은 시간입니다. 열 1, 2 및 3의 내용은 서버가 반환 한 JSON 데이터에서 나옵니다. 네 번째 열은 현재 행의 데이터 작업이며, 청취 이벤트 OperateEvents가 추가되어 창에 바인딩됩니다.

SortName은 열 1의 필드 값으로 설정됩니다.

Sortorder는 역 순서로 설정되었습니다.

Pagination은 Pagination에 해당됩니다.

사이드 파티네이션은 서버 페이지 매김을 나타냅니다.

pagenumber는 기본 시작 페이지를 나타냅니다.

Pagesize는 페이지 당 표시되는 데이터 수를 나타냅니다.

Pagelist는 페이지 당 표시되는 선택의 수를 나타냅니다.

QueryParams는 서버로 전송 된 각 매개 변수가 필요한 매개 변수에 추가 될 수 있음을 의미합니다.

URL은 데이터의 요청 주소입니다.

bootstrap-table.js를 확인하면 기본 매개 변수 매개 변수를 볼 수 있습니다.

 bootstraptable.prototype.initserver = function (silent, query) {var that = this, data = {}, params = {pagesize : this.options.pagesize === this.options.formatallrows ()? this.options.totalrows : this.options.pagesize, pagenumber : this.options.pagenumber, searchtext : this.searchtext, sortname : this.options.sortname, sortorder : this.options.sortorder}; if (! this.options.url) {return; } if (this.Options.queryParamStype === 'limit') {params = {검색 : params.searchText, 정렬 : params.sortName, Order : params.sortorder}; if (this.options.pagination) {params.limit = this.options.pagesize === this.options.formatallrows ()? this.options.totalrows : this.options.pagesize; params.offset = this.options.pagesize === this.options.formatallrows ()? : this.options.pagesize * (this.options.pagenumber -1); }}

서버 배경은 세 가지 기능을 구현합니다. 하나는 데이터를 기반으로로드하고 데이터를 수정 및 삭제하는 것입니다.

 public actionResult getJsonHistoryDatas () {var displayStart = int.parse (요청 [ "오프셋"]); var displayLength = int.parse (요청 [ "pagesize"]); var meterid = int.parse (요청 [ "meterid"]); var order = 요청 [ "Sortorder"]; var historydatas = db.metermeasureHistories. 여기서 (p => p.metermeasure.meterid == meterid). OrderByDescending (p => p.timestamp). Skip (DisplayStart). take (displayLength) .tolist (); // 가장 최근의 DisplayLength 데이터를 표시합니다. 여기서 (p => p.metermeasure.meterid == meterid). Orderby (P => P.Timestamp). Skip (DisplayStart). take (displayLength) .tolist (); // 초기 DisplayLength 데이터 표시} int historyDatatotal = db.metermeasureHistories를 표시합니다. 여기서 (p => p.metermeasure.meterid == meterid) .count (); // 총 데이터 수 // 시간 필터링 if (! string.isnullorEmpty (요청 [ "begintime"])) {dateTime begintime = dateTime.parse (요청 [ "begintime"]); dateTime endTime = dateTime.parse (요청 [ "endtime"]); HistoryDatas = db.metermeasureHistories. 여기서 (p => p.metermeasure.meterid == meterid). 여기서 (p => p.timestamp> begintime && p.timestamp <종료 시간). OrderByDescending (p => p.timestamp). Skip (DisplayStart). take (displayLength) .tolist (); // 가장 최근의 DisplayLength 스트립 데이터를 표시합니다. 여기서 (p => p.metermeasure.meterid == meterid). 여기서 (p => p.timestamp> begintime && p.timestamp <종료 시간). Orderby (P => P.Timestamp). Skip (DisplayStart). take (displayLength) .tolist (); // 초기 DisplayLength 데이터 표시} historyDatatotal = db.metermeasureHistories를 표시합니다. 여기서 (p => p.metermeasure.meterid == meterid). 여기서 (p => p.timestamp> begintime && p.timestamp <endtime) .count (); // 총 데이터 수} 목록 <metermeasureHistoryDataViewModels> ListMeterMeasureHistories = 새 목록 <MeterMeasureHistoryDataViewModels> (); foreach (historydatas의 var 항목) {listmetermeasureHistories.add (new meterMeasureHistoryDataViewModels {meterMeasureHistoryId = item.MeterMeasureHistoryId, value = item.value, timestamp = item.timestamp.tostring ()}); } string jsondatatable = jsonConvert.SerializeObject (new {Total = historyDatatotal, rows = listMeterMeasureHistories}); 반환 내용 (jsondatatable);}

페이지 매김 및 데이터 쿼리를 구현하고 JSON 데이터를 반환합니다. 반환 된 JSON 데이터에는 총과 행의 두 가지 객체가 포함됩니다. 총계는 총 데이터 수를 나타내고 행은 표시 할 데이터를 나타냅니다. MeterMeasureHistoryDateView는 다음과 같습니다. 표의 필드 값에 해당합니다.

 공개 클래스 MeterMeasureHistoryDataViewModels {public int meterMeasureHistoryID {get; 세트; } public double value {get; 세트; } public String timestamp {get; 세트; }}

데이터 수정 기능 :

 [httppost] public jsonresult editmetermeasureHistoryData () {var meterestehistoryId = int.parse (요청 [ "meterMeasureHistoryID"]); var meterestehistoryvalue = double.parse (요청 [ "value"]); var meterestehistorytime = datetime.parse (요청 [ "timestamp"]); var meterestehistoryindb = db.metermeasureHistory.Find (meterestehistoryID); meteresteporhistoryindb.value = meteresteaperhistoryValue; meteresteporehistoryindb.timestamp = meteresteaperhistorytime; db.sevechanges (); var ChangeData = New MeterMeasureHistoryDataViewModels {meterMeasureHistoryID = meteresteporeHistoryIndb.MeterMeasureHistoryID, value = meterescephistoryIndb.value, timestamp = meteresteasureHistoryIndb.timestamp.toString ()}; JSONRESULT JS = NEW JSONRESULT (); js.data = json (ChangeData); 반환 js;}

데이터 삭제 기능 :

 [httppost] public jsonresult deletemetermeasureHistoryData () {var meteresteHistoryID = int.parse (요청 [ "meterMeasureHistoryID"]); db.metermeasureHistory.remove (db.MeterMeasureHistory.Find (meteresteHistoryID)); db.sevechanges (); var deleteddata = new metermeasureHistoryDataViewModels {meterMeasureHistoryID = meteresteUredeSepitionHistoryID, value = 0, timestamp = null}; JSONRESULT JS = NEW JSONRESULT (); js.data = deletedData; 반환 js;}

서버가 삭제 된 후 전경은 부트 스트랩 테이블 메소드를 통해 지정된 데이터 행을 삭제합니다.

나는 지금 이런 것들을 사용했습니다. 학습 과정을 요약하려면 공식 문서, 예제를 찾고 소스 코드를보고, Chrome 개발자 도구를 사용하여 소스와 네트워크를 볼 수 있습니다.

위는 Bootstrap 테이블 서버 페이지 매김 및 편집자가 소개 한 온라인 편집 응용 프로그램의 요약입니다. 모든 사람에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 모든 사람에게 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!