详解jqueryeasyui之datagrid使用参考资源-CSDN文库

30 浏览量 2021-01-19 16:36:29 上传评论 1 收藏 116KB PDF 举报

资源推荐

资源详情

资源评论

详解详解jquery easyui之之datagrid使用参考使用参考

本文介绍了jquery easyui之datagrid使用，具体如下：

创建创建datagrid

在页面上添加一个div或table标签，然后用jquery获取这个标签，并初始化一个datagrid。代码如下：

页面上的div标签：

<div id="magazineGrid">

</div>

js代码：

$('#magazineGrid').datagrid({

height: 340,

url: 'url',

method: 'POST',

queryParams: { 'id': id },

idField: '产品ID',

striped: true,

fitColumns: true,

singleSelect: false,

rownumbers: true,

pagination: false,

nowrap: false,

pageSize: 10,

pageList: [10, 20, 50, 100, 150, 200],

showFooter: true,

columns: [[

{ field: 'ck', checkbox: true },

{ field: '刊名', title: '刊名', width: 180, align: 'left' },

{ field: '类别', title: '类别', width: 150, align: 'left' },

{ field: '月份', title: '月份', width: 100, align: 'left' },

{ field: '期次', title: '期次', width: 100, align: 'left' },

{ field: '价格', title: '价格', width: 100, align: 'right' },

{ field: '订阅数', title: '订阅数', width: 100, align: 'right' },

{ field: '库存数', title: '库存数', width: 100, align: 'right' },

{ field: '邮寄方式', title: '邮寄方式', width: 80, align: 'left' },

{ field: '数量', title: '数量', width: 80, align: 'left',

editor: {

type: 'numberbox',

options: {

min: 0,

precision: 0

}

}

}

]],

onBeforeLoad: function (param) {

},

onLoadSuccess: function (data) {

},

onLoadError: function () {

},

onClickCell: function (rowIndex, field, value) {

}

});

ajax请求返回的数据格式请求返回的数据格式

datagrid在创建完成后会根据url请求数据，这是通过ajax来完成的。服务器在完成请求处理后应返回带有rows属性的数据，如

果用到分页，还需要有total属性：

var rst = new { total = iTotalCount, rows = entityList };

说到ajax请求，难免需要在请求的时候传入一些查询条件，我通常是在onBeforeLoad事件中添加查询条件的：

onBeforeLoad: function (param) {

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

内容反馈

weixin_38724535

粉丝: 3
资源: 915

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip