datagrid php json,详解EasyUI的DataGrid绑定Json数据源方法

EasyUI给表格绑定数据是最常用的方法，本篇文章主要介绍了EasyUI的DataGrid绑定Json数据源的示例代码，小编分享一下总结出来的两种绑定表格方法，希望能帮助到大家。

第一种：数据存放在数据集中，每一行对应多个值，利用循环把数据绑定到表格

前台代码：

列1列2列3列4列5列6

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设置好列名，自动绑定

前台代码：

列名1列名2列名3列名4列名5列名6

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) {

//表格加载成功后执行的代码，如果不需要可以删除

}

})

把JS代码放在一个function函数中就可以了，函数执行时表格就可以绑定数据了

相关推荐：