EasyUI的DataGrid绑定Json数据源的示例代码
更新时间：2017年12月16日 08:34:43 作者：13期-侯旭日
本篇文章主要介绍了EasyUI的DataGrid绑定Json数据源的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
EasyUI给表格绑定数据是最常用的方法，小编分享一下总结出来的两种绑定表格方法，知识在于积累。
第一种：数据存放在数据集中，每一行对应多个值，利用循环把数据绑定到表格
前台代码：
<table id="dg" class="easyui-datagrid" style="width:100%;height:100%;" 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) {
//表格加载成功后执行的代码，如果不需要可以删除
}
})
把JS代码放在一个function函数中就可以了，函数执行时表格就可以绑定数据了
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了js实现单层数组转多层树方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
虽然Uniapp可以使用Vue.js自带的$http,但也可以使用Axios,只需要在项目中进行简单的配置,这篇文章主要给大家介绍了关于uniapp引入axios异步框架的相关资料,需要的朋友可以参考下2023-12-12
这篇文章主要介绍了moment.js 计算当前一周、一月对应日期的实例代码，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
很多同学知道怎么用这种匿名函数，却或许并不明白为什么这样写就能够调用匿名函数。也许知道后面的圆括号是执行前面的函数，而并不清楚前面的圆括号具有何种含义！本文将带你了解匿名函数的代码模式原理。2010-03-03
yepnope.js是一个能够根据输入条件来选择性异步加载资源文件的js脚本，可以在页面上仅加载用户需要的js/css。2011-09-09
下面小编就为大家带来一篇深入理解MVC中的时间js格式化。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
这篇文章主要为大家详细介绍了JS+DIV实现拖动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-02-02
这篇文章主要为大家介绍了prefers-color-scheme设置检测系统主题色实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
ECMAScript 基础知识...2007-06-06
不用一行代码和一句提示语就搞定整个表单验证,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
最新评论