EasyUI的DataGrid綁定Json數(shù)據(jù)源的示例代碼
EasyUI給表格綁定數(shù)據(jù)是最常用的方法,小編分享一下總結(jié)出來的兩種綁定表格方法,知識(shí)在于積累。
第一種:數(shù)據(jù)存放在數(shù)據(jù)集中,每一行對(duì)應(yīng)多個(gè)值,利用循環(huán)把數(shù)據(jù)綁定到表格
前臺(tái)代碼:
<table id="dg" class="easyui-datagrid" style="width:100%;height:100%;" title="需要設(shè)置表格標(biāo)題" data-options=" rownumbers:true, singleSelect:true, @*autoRowHeight:false,*@ pagination:true @*pageSize:10*@"> <thead> <tr> <th field="colum1">列1</th> <th field="colum2">列2</th> <th field="colum3">列3</th> <th field="colum4">列4</th> <th field="colum5">列5</th> <th field="colum6">列6</th> </tr> </thead> </table>
JS代碼:
(function ($) { function pagerFilter(data) { if ($.isArray(data)) { // is array data = { total: data.length, rows: data } } var target = this; var dg = $(target); var state = dg.data('datagrid'); var opts = dg.datagrid('options'); if (!state.allRows) { state.allRows = (data.rows); } if (!opts.remoteSort && opts.sortName) { var names = opts.sortName.split(','); var orders = opts.sortOrder.split(','); state.allRows.sort(function (r1, r2) { var r = 0; for (var i = 0; i < names.length; i++) { var sn = names[i]; var so = orders[i]; var col = $(target).datagrid('getColumnOption', sn); var sortFunc = col.sorter || function (a, b) { return a == b ? 0 : (a > b ? 1 : -1); }; r = sortFunc(r1[sn], r2[sn]) * (so == 'asc' ? 1 : -1); if (r != 0) { return r; } } return r; }); } var start = (opts.pageNumber - 1) * parseInt(opts.pageSize); var end = start + parseInt(opts.pageSize); data.rows = state.allRows.slice(start, end); return data; } var loadDataMethod = $.fn.datagrid.methods.loadData; var deleteRowMethod = $.fn.datagrid.methods.deleteRow; $.extend($.fn.datagrid.methods, { clientPaging: function (jq) { return jq.each(function () { var dg = $(this); var state = dg.data('datagrid'); var opts = state.options; opts.loadFilter = pagerFilter; var onBeforeLoad = opts.onBeforeLoad; opts.onBeforeLoad = function (param) { state.allRows = null; return onBeforeLoad.call(this, param); } var pager = dg.datagrid('getPager'); pager.pagination({ onSelectPage: function (pageNum, pageSize) { opts.pageNumber = pageNum; opts.pageSize = pageSize; pager.pagination('refresh', { pageNumber: pageNum, pageSize: pageSize }); dg.datagrid('loadData', state.allRows); } }); $(this).datagrid('loadData', state.data); if (opts.url) { $(this).datagrid('reload'); } }); }, loadData: function (jq, data) { jq.each(function () { $(this).data('datagrid').allRows = null; }); return loadDataMethod.call($.fn.datagrid.methods, jq, data); }, deleteRow: function (jq, index) { return jq.each(function () { var row = $(this).datagrid('getRows')[index]; deleteRowMethod.call($.fn.datagrid.methods, $(this), index); var state = $(this).data('datagrid'); if (state.options.loadFilter == pagerFilter) { for (var i = 0; i < state.allRows.length; i++) { if (state.allRows[i] == row) { state.allRows.splice(i, 1); break; } } $(this).datagrid('loadData', state.allRows); } }); }, getAllRows: function (jq) { return jq.data('datagrid').allRows; } }) })(jQuery);
$.ajax({ type: "get", //AJAX提交方式 url: "路徑", datatype: "json", data: "userid=" + "id"+ "&username=" + "name", //向后臺(tái)傳遞參數(shù),無需傳遞參數(shù)就可以刪除 success: function (data) { var rows = []; for (var i = 0; i < data.length; i++) { //data是返回值的集合 rows.push({ //把data數(shù)據(jù)對(duì)應(yīng)的值壓到rows對(duì)應(yīng)數(shù)組中 colum1: data[i].userid, colum2: data[i].leve, colum3: data[i].Username, colum4: data[i].Tel, colum5: data[i].Mail, colum6: data[i].Explain }); } $('#dg').datagrid({ data: rows }).datagrid('clientPaging'); }, error: function () { //執(zhí)行出錯(cuò)時(shí)執(zhí)行的方法 $.messager.alert("操作提示", "表格失敗,請(qǐng)聯(lián)系管理員!", "warning"); } });
需要綁定表格時(shí)調(diào)用AJAX方法,AJAX執(zhí)行完后會(huì)自動(dòng)調(diào)用顯示數(shù)據(jù)方法,表格數(shù)據(jù)就顯示出來了
第二種:直接在前臺(tái)和JS設(shè)置好列名,自動(dòng)綁定
前臺(tái)代碼:
<table id="dg" class="easyui-datagrid" title="需要顯示表格標(biāo)題 " data-options=" rownumbers:true, singleSelect:true, autoRowHeight:false, pagination:true, "> <thead> <tr> <th data-options="field:'colum1',align:'center'">列名1</th> <th data-options="field:'colum2',align:'center'">列名2</th> <th data-options="field:'colum3',align:'center'">列名3</th> <th data-options="field:'colum4',align:'center'">列名4</th> <th data-options="field:'colum5',align:'center'">列名5</th> <th data-options="field:'colum6',align:'center'">列名6</th> </tr> </thead> </table>
JS代碼:
$('#dg').datagrid({ url: '路徑?Name=' + Name + "&combox=" + combox, //設(shè)置訪問后臺(tái)路徑和傳遞參數(shù),如果沒有參數(shù)可以刪除 dataType: 'json', width: "100%", //寬度 striped: true, //把行條紋化(奇偶行背景色不同) idField: 'quesID', //標(biāo)識(shí)字段 loadMsg: '正在加載用戶的信息.......', //從遠(yuǎn)程站點(diǎn)加載數(shù)據(jù)是,顯示的提示消息 pagination: true, //數(shù)據(jù)網(wǎng)格底部顯示分頁(yè)工具欄 singleSelect: false, //只允許選中一行 pageList: [10, 20, 30, 40, 50], //設(shè)置每頁(yè)記錄條數(shù)的列表 pageSize: 10, //初始化頁(yè)面尺寸(默認(rèn)分頁(yè)大?。? pageNumber: 1, //初始化頁(yè)面(默認(rèn)顯示第一頁(yè)) beforePageText: '第', //頁(yè)數(shù)文本框前顯示的漢字 afterPageText: '頁(yè) 共 {pages} 頁(yè)', displayMsg: '第{from}到{to}條,共{total}條', columns: [[ //每頁(yè)具體內(nèi)容 { field: 'colum1', title: '標(biāo)題1', width: "13%", align: 'center', editor: 'text' }, { field: 'colum2', title: '標(biāo)題2', width: "13%", align: 'center', editor: 'text' }, { field: 'colum3', title: '標(biāo)題3', width: "13%", align: 'center', editor: 'text' }, { field: 'colum4', title: '標(biāo)題4', width: "13%", align: 'center', editor: 'text' }, { field: 'colum5', title: '標(biāo)題5', width: "13%", align: 'center', editor: 'text' }, { field: 'colum6', title: ' 標(biāo)題6 ', width: "13%", align: 'center', editor: 'text' }, ]], onLoadSuccess: function (data) { //表格加載成功后執(zhí)行的代碼,如果不需要可以刪除 } })
把JS代碼放在一個(gè)function函數(shù)中就可以了,函數(shù)執(zhí)行時(shí)表格就可以綁定數(shù)據(jù)了
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- jQuery EasyUI API 中文文檔 - DataGrid數(shù)據(jù)表格
- Jquery下EasyUI組件中的DataGrid結(jié)果集清空方法
- jQuery easyui datagrid動(dòng)態(tài)查詢數(shù)據(jù)實(shí)例講解
- jQuery EasyUI datagrid實(shí)現(xiàn)本地分頁(yè)的方法
- jQuery EasyUI之DataGrid使用實(shí)例詳解
- JQueryEasyUI datagrid框架的基本使用
- jQuery Easyui學(xué)習(xí)之datagrid 動(dòng)態(tài)添加、移除editor
- 實(shí)現(xiàn)easyui的datagrid導(dǎo)出為excel的示例代碼
- EasyUI中datagrid在ie下reload失敗解決方案
相關(guān)文章
JS重寫Date函數(shù)以及兼容IOS系統(tǒng)
這篇文章主要介紹了JS重寫Date函數(shù)以及兼容IOS系統(tǒng),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10Bootstrap基本組件學(xué)習(xí)筆記之導(dǎo)航(10)
這篇文章主要為大家詳細(xì)介紹了Bootstrap基本組件學(xué)習(xí)筆記之導(dǎo)航,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12微信小程序?qū)崿F(xiàn)YDUI的ScrollNav組件
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)YDUI的ScrollNav組件,滾動(dòng)導(dǎo)航效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-02-02javascript實(shí)現(xiàn)復(fù)選框全選或反選
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)復(fù)選框全選或反選,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02