jquery easyui DataGrid简单示例

2020-05-24 21:45:36易采站长站整理

查询bug:使用参数查询时候,在查询之后,显示的当前页码还是之前的 ,不会重置为1,还是之前页码;如果当前总页数为比当前小,导致页面显示为空。比如,当前第三页,加入时间查询后,只有1页数据,那么当前页码还是3,导致页面显示空白。

解决方案:设置pageNumber为 1


$("#btnSearch").click(function () {
$('#tbList').datagrid("unselectAll");
$('#tbList').datagrid({ pageNumber: 1,queryParams: { SearchName: $("#SearchName").val() } });
});

 三、行数据的增删改

HTML(不分页列表)


<table id=”tbProductList” style=”height: 500px; max-height: 500px;” fix=”true” fitcolumns=”true” idfield=”ID” url=”@Url.Action(“ListData”)”></table>

JS


$(document).ready(function () {
var datagrid;
var editRow = undefined;
datagrid = $("#tbList").datagrid({
border: true,
checkbox: true,
iconCls: 'icon-save', //图标
nowap: true, //列内容多时自动折至第二行
pagination: false,
rownumbers: true,
striped: true, //行背景交换
columns: [[//显示的列
{ field: 'ID', title: '编号', width: 100, align: 'center', sortable: true, checkbox: true },
{ field: 'Name', title: '名称', width: 100, sortable: true },
{
field: 'PriceType', title: '类型', width: 100, align: 'center',
formatter: function (value, row) { return row.TypeName; },
editor: {
type: 'combobox', options: {
valueField: 'Value',
textField: 'Text',
method: 'get',
url: $("#TypeUrl").val(),
required: true
}
}
},
{
field: 'Price', title: '价格', width: 100, align: 'center',
editor: {
type: 'numberbox', options: {
required: true,
min: 0,
precision: 2
}
}
},
{
field: 'Count', title: '数量', width: 100, align: 'center',
editor: {
type: 'numberbox', options: {
required: true,
min: 0,
precision: 0
}
}
}
]],
queryParams: { action: 'query' }, //查询参数
toolbar: [{ text: '添加', iconCls: 'icon-add', handler: function () {//添加列表的操作按钮添加,修改,删除等
//添加时先判断是否有开启编辑的行,如果有则把开户编辑的那行结束编辑