esayui datagrid JQuery 一般用的方法

dg 为datagrid的id属性<table id="dg"></table>

$("#dg").datagrid({

url: uri + "/wapi/User/GetUserShow", //指向一个一般处理程序或者一个控制器，返回数据要求是Json格式，直接赋值Json格式数据也可，我以demo中自带的Json数据为例，就不写后台代码了，但是我会说下后台返回的注意事项
//title: "用户管理",
//align: 'center',
//iconCls: "icon-add",
fitColumns: false, //设置为true将自动使列适应表格宽度以防止出现水平滚动,false则自动匹配大小
//toolbar设置表格顶部的工具栏，以数组形式设置
idField: 'id', //标识列，一般设为id，可能会区分大小写，大家注意一下
loadMsg: "正在努力为您加载数据", //加载数据时向用户展示的语句
pagination: true, //显示最下端的分页工具栏
rownumbers: true, //显示行数 1，2，3，4...
pageSize: 10, //读取分页条数，即向后台读取数据时传过去的值
pageList: [10, 20, 30], //可以调整每页显示的数据，即调整pageSize每次向后台请求数据时的数据
//由于datagrid的属性过多，我就不每个都介绍了，如有需要，可以看它的API
//sortName: "User_Id", //初始化表格时依据的排序 字段 必须和数据库中的字段名称相同
//sortOrder: "asc", //正序
/*
单击行，不选中，只有单击checkbox的时候才选中
onClickCell: function (rowIndex, field, value) {
IsCheckFlag = false;
},
onSelect: function (rowIndex, rowData) {
if (!IsCheckFlag) {
IsCheckFlag = true;
$("#dg").datagrid("unselectRow", rowIndex);
}
},
onUnselect: function (rowIndex, rowData) {
if (!IsCheckFlag) {
IsCheckFlag = true;
$("#dg").datagrid("selectRow", rowIndex);
}
},
*/
//这里之所以有两个方括号，是因为可以做成水晶报表形式，具体可看demo
singleSelect: false,// false 实现全选
checkOnSelect: true,// 如果为true，当用户点击行的时候该复选框就会被选中或取消选中。 如果为false，当用户仅在点击该复选框的时候才会呗选中或取消。
selectOnCheck: true,//如果为true，单击复选框将永远选择行。 如果为false，选择行将不选中复选框。
idField: 'User_Id', // 实现多选
columns: [[
{ field: 'User_Id', title: 'id', width: 200, align: 'center', hidden: 'true' },
{ field: 'ck', width: 50, checkbox: true },
{ field: 'User_Name', title: '姓名', width: 200, align: 'center' },
{ field: 'User_Tel', title: '电话', width: 100, align: 'center' },
{ field: 'User_Pwd', title: '密码', width: 100, align: 'center' },
//{ field: 'name', title: 'Name', width: 100, sortable: true },//sortable:true点击该列的时候可以改变升降序
{
field: 'Role_Name', title: '角色', width: 100,
//这里可以添加这样一个方法，使其显示数据得到改变
//formatter: function (value, row, index) {
// if (value == "6") {
// return "普通角色";
// } else {
// return "特殊角色";
// }
//}
},
{
field: 'opt', title: '操作', width: 100, align: 'center',
formatter: function (value, row, index) {
var a = JSON.stringify(row);
var s = "<a href='#' mce_href='#' οnclick='view(" + a + ")'>查看</a> ";
var e = "<a href='#' mce_href='#' οnclick='updaterow(" + a + ")'>编辑</a> ";
var d = "<a href='#' mce_href='#' οnclick='del(\"" + row.User_Name + "\")'>删除</a> ";
return s + e + d;
}
}
//{
// field: 'operate', title: '操作', align: 'center', width: $(this).width() * 0.1,
// formatter: function (value, row, index) {
// var str = '<a href="#" name="opera" class="easyui-linkbutton" ></a>';
// return str;
// }
//}
]],
onLoadError: function (data) {
var a = JSON.stringify(data);
alert("列表加载错误。"); //校验json格式数据
$('#dg').datagrid("loadData", {
total: 0,
rows: []
});
},
onLoadSuccess: function () {
// 显示最后一行，覆盖数据
//$("a[name='opera']").linkbutton({ text: '下订单', plain: true, iconCls: 'icon-add' }); //
$("#dg").datagrid('clearSelections'); //一定要加上这一句，要不然datagrid会记住之前的选择状态，删除时会出问题
},
//queryParams: {
// UserName: "" //发送额外的参数
//},
rowStyler: function (index, row) {
if (index % 2 == 0) {
return 'background-color:red;color:#fff;';
}
},
toolbar: [
{
text: '增加',
iconCls: 'icon-add',
handler: function () {
addrow();
}
}, '-',
{
text: '删除',
iconCls: 'icon-cut',
handler: function () {
checkdel();
}
}, '-',
{
text: "<input type='text' id='cha' />"
},
{
text: '查找',
iconCls: 'icon-search',
handler: function () {
$('#dg').datagrid('load', {
name: $('#cha').val()
});
}
}
],
});
// 显示为中文
$('#dg').datagrid('getPager').pagination({//分页栏下方文字显示
displayMsg: '当前显示从第{from}条到{to}条 共{total}条记录',
onBeforeRefresh: function (pageNumber, pageSize) {
$(this).pagination('loading');
alert('pageNumber:' + pageNumber + ',pageSize:' + pageSize);
$(this).pagination('loaded');
}
});