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 "htmlcode">$.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: '路径"&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函数中就可以了,函数执行时表格就可以绑定数据了
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月23日
2024年09月23日
- 国风大师纯音系列《古筝仙子 常静演奏 十指弹一》1CD[FLAC][919MB]
- DasKapital-OneMustHaveChaosInsidetoGiveBirthtoaDancingStar(2024)[24-44.1]WAV
- 王菲.1999-《只爱陌生人》日本东芝版[低速原抓WAV+CUE]
- 张小英1987-金奖金曲第一集[新加坡版][WAV+CUE]
- 鹿晗.2015-重启【海蝶】【FLAC分轨】
- 张芸京.2012-小女孩【金牌大风】【WAV+CUE】
- 余天.2002-雄狮魅力金曲2CD(南方金点系列)【南方】【WAV+CUE】
- 银霞.1982-《结·SAYYESMYBOY》台湾复刻版[WAV+CUE]
- 梁汉文1993-火热动感[引进版][WAV+CUE]
- 梁汉文2008-EDMONDHITS48[香港]3CD[WAV+CUE]
- 国风大师纯音系列《童丽-[渭城曲]》1CD[WAV分轨][593.5MB]
- 国风大师纯音系列《许菱子《烧筝2》古筝曲集》1CD[WAV分轨][1.3GB]
- 王子异《1996 Part.2》[320K/MP3][18.29MB]
- 群星.1994-宝丽金最倾情3CD【宝丽金】【WAV+CUE】
- 乐俊亨.2024-同泪【CharioticMusic】【FLAC分轨】