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", //正序

//这里之所以有两个方括号，是因为可以做成水晶报表形式，具体可看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="#" target="_blank" rel="external nofollow" 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');

}

});