EasyUI的DataGrid绑定Json数据源的示例代码(2)
$.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) {
//表格加载成功后执行的代码,如果不需要可以删除
}
})
内容版权声明:除非注明,否则皆为本站原创文章。
