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');

}

});