EasyUI的DataGrid绑定Json数据源

左手的ㄟ右手 2022-06-04 06:40 365阅读 0赞

**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函数中就可以了，函数执行时表格就可以绑定数据了**

发表评论取消回复

表情：

评论列表（有 0 条评论，365人围观）

还没有评论，来说两句吧...

相关阅读

相关 Wpf DataGrid的数据绑定

在项目开发的过程，通常会遇到一些表格数据的绑定，因为没有WPF的开发经验所以一边摸索一边开发，所幸WPF的上手难度不大，开发过程较为顺利。不过在使用DataGrid的时候还是遇

亦凉/ 2024年03月27日 15:08/ 0 赞/ 102 阅读

相关 WPF 中 DataGrid 绑定数据

> 本文中的 DataGrid 的数据源以 list 为例 Xaml 文件中： <DataGrid x:Name="dgWorkLog" ItemsSou

Dear 丶/ 2023年10月18日 19:18/ 0 赞/ 136 阅读

相关 jqGrid绑定Json数据

json： var jsonData = new \{ total = totalPages, page = page, records = totalReco

比眉伴天荒/ 2022年08月30日 04:13/ 0 赞/ 191 阅读

相关 spring mvc 结合easyui datagrid 使用responseBody 注解返回json 无法绑定

今天遇到了这个问题，o(︶︿︶)o 唉，究其原因，太长时间不用easyui了。都忘记怎么用了。使用 easyui datagrid表格，返回的日期要符合要求的格式

客官°小女子只卖身不卖艺/ 2022年08月14日 05:40/ 0 赞/ 171 阅读

相关 EasyUI的DataGrid绑定Json数据源

EasyUI给表格绑定数据是最常用的方法，小编分享一下总结出来的两种绑定表格方法，知识在于积累。第一种：数据存放在数据集中，每一行对应多个值，利用循环把数据绑定到表格前

左手的ㄟ右手/ 2022年06月04日 06:40/ 0 赞/ 366 阅读

相关 easyui datagrid 的数据加载Json数据

var obj = {'total':100,'rows':[{id:'1',name:'一'},{id:'2',name:'二'}]}; $('t

我就是我/ 2022年06月04日 02:53/ 0 赞/ 397 阅读

相关 EasyUI的DataGrid绑定Json数据源

EasyUI给表格绑定数据是最常用的方法，小编分享一下总结出来的两种绑定表格方法，知识在于积累。第一种：数据存放在数据集中，每一行对应多个值，利用循环把数据绑定到表格

落日映苍穹つ/ 2022年06月03日 08:15/ 0 赞/ 212 阅读

相关【EasyUI】 datagrid 竖排绑定数据

展示效果： ![466582-20171120090455696-1873964690.png][] datagrid绑定： $('id').datagr

柔光的暖阳◎/ 2021年12月16日 16:27/ 0 赞/ 378 阅读

相关 jquery easyui datagrid列绑定嵌套对象

1. json的数据格式： var map = \{"uname":'',"upwd":'',"role":\{“rolename”:'',"roleLevel"

墨蓝/ 2021年12月14日 10:59/ 0 赞/ 260 阅读

相关 Easyui实现datagrid绑定JS本地对象（可不请求URL，不生成JSON）

初次接触easyui，使用datagrid时绑定数据时，大多人骂他的设计很烂，一定要在URL中指定一个json文件，或者请求一个服务器端动态生成的json程序，而在实际的开发中

素颜马尾好姑娘i/ 2021年12月01日 16:00/ 0 赞/ 344 阅读