溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章為大家展示了怎么在EasyUI中使用DataGrid綁定Json數據源，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。
第一種：數據存放在數據集中，每一行對應多個值，利用循環把數據綁定到表格
前臺代碼：
<table id="dg" class="easyui-datagrid" title="需要設置表格標題" 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", //向后臺傳遞參數，無需傳遞參數就可以刪除
success: function (data) {
var rows = [];
for (var i = 0; i < data.length; i++) { //data是返回值的集合
rows.push({ //把data數據對應的值壓到rows對應數組中
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 () { //執行出錯時執行的方法
$.messager.alert("操作提示", "表格失敗，請聯系管理員！", "warning");
}
});需要綁定表格時調用AJAX方法，AJAX執行完后會自動調用顯示數據方法，表格數據就顯示出來了
第二種：直接在前臺和JS設置好列名，自動綁定
前臺代碼：
<table id="dg" class="easyui-datagrid" title="需要顯示表格標題 " 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, //設置訪問后臺路徑和傳遞參數，如果沒有參數可以刪除
dataType: 'json',
width: "100%", //寬度
striped: true, //把行條紋化（奇偶行背景色不同）
idField: 'quesID', //標識字段
loadMsg: '正在加載用戶的信息.......', //從遠程站點加載數據是，顯示的提示消息
pagination: true, //數據網格底部顯示分頁工具欄
singleSelect: false, //只允許選中一行
pageList: [10, 20, 30, 40, 50], //設置每頁記錄條數的列表
pageSize: 10, //初始化頁面尺寸（默認分頁大小）
pageNumber: 1, //初始化頁面（默認顯示第一頁）
beforePageText: '第', //頁數文本框前顯示的漢字
afterPageText: '頁 共 {pages} 頁',
displayMsg: '第{from}到{to}條，共{total}條',
columns: [[ //每頁具體內容
{ field: 'colum1', title: '標題1', width: "13%", align: 'center', editor: 'text' },
{ field: 'colum2', title: '標題2', width: "13%", align: 'center', editor: 'text' },
{ field: 'colum3', title: '標題3', width: "13%", align: 'center', editor: 'text' },
{ field: 'colum4', title: '標題4', width: "13%", align: 'center', editor: 'text' },
{ field: 'colum5', title: '標題5', width: "13%", align: 'center', editor: 'text' },
{ field: 'colum6', title: ' 標題6 ', width: "13%", align: 'center', editor: 'text' },
]],
onLoadSuccess: function (data) {
//表格加載成功后執行的代碼，如果不需要可以刪除
}
})上述內容就是怎么在EasyUI中使用DataGrid綁定Json數據源，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
