1 新建DataGrid.js文件
/***
*
*
*el: table id
*
***/
function showDataGrid(el) {
$(el).datagrid({
title: '不分頁的gridview',
url: '/Home/GetUserInfo', //一個用以從遠程站點請求數據的超鏈接地址。
method: 'get', //請求遠程數據的方法類型 默認 post
loadMsg: '數據正在加載，請稍等...',//當從遠程站點載入數據時，顯示的一條快捷信息。
autoRowHeight: true, //定義設置行的高度，根據該行的內容。設置為false可以提高負載性能。
height: 1000, // 設置高度
width: 'auto', //設置寬度
striped: true,//設置為true將交替顯示行背景。
nowrap: true,//設置為true，當數據長度超出列寬時將會自動截取。
rownumbers: true,//設置為true將顯示行數。
singleSelect: true,//設置為true將只允許選擇一行。
sortName: 'Age', //當數據表格初始化時以哪一列來排序。
sortOrder: 'asc',//定義排序順序，可以是'asc'或者'desc'（正序或者倒序）。
showFooter: false,//定義是否顯示行底（如果是做統計表格，這里可以顯示總計等）
cache: true,
iconCls: 'icon-save', // 設置表頭的圖標
collapsible: true, //右上角可以折疊
toolbar: toolbar,
columns: [[
{
field: '',
title: '',
checkbox: true
},
{
field: 'Name',
title: '姓名',
width: 100,
sortable: true, //設置為true允許對該列排序。
rowspan: 1, //表明一個單元格跨幾行。
colspan: 1, // 表明一個單元格跨幾列。
hidden: false,//設置為true將隱藏列。
//格式化單元格函數，有3個參數：
//value：字段的值。
// rowData：行數據。
// rowIndex：行索引。
formatter: function (value, row, index) {
if (index == 1) {
return 'sasasas';
}
else
return value;
},
//單元格樣式函數，返回樣式字符串裝飾表格如'background:red'，function有3個參數：
//value：字段值。
// rowData：行數據。
// rowIndex：行索引。
styler: function (value, row, index) {
if (index < 9)
return 'background-color:yellow;color:red;';
},
editor: 'text'
},
{ field: 'Age', title: '年齡', width: 100 },
{ field: 'Work', title: '工作', width: 100 },
]],
fitColumns: true,
rowStyler: function (index, row) { //返回樣式，如：'background:red'，function有2個參數：
if (index == 10) // index：行索引，從0開始.
return 'background-color:red;color:#fff;' // row：對應於該行記錄的對象。
},
// 以下三個屬性 分組
//groupField: 'Name',
//view:groupview, // 這個 function 要自己寫
//groupFormatter: function (value, rows) { // 值
// return '分組' - value + ' - ' + rows.length + ' Item(s)'; //rows 總的個數
//}
});
}
// 定義toolbar
var toolbar = [{
text: 'Add',
iconCls: 'icon-add',
handler: function () { alert('add') }
}, {
text: 'Cut',
iconCls: 'icon-cut',
handler: function () { $.messager.alert('info','cut') }
}, '-', {
text: 'Save',
iconCls: 'icon-save',
handler: function () { alert('save') }
}];
2 前端使用：
<script src="~/jquery-easyui-1.5.5.2/jquery.min.js"></script> <script src="~/jquery-easyui-1.5.5.2/jquery.easyui.min.js"></script> <script src="~/jquery-easyui-1.5.5.2/locale/easyui-lang-zh_CN.js"></script> <link href="~/jquery-easyui-1.5.5.2/themes/default/easyui.css" rel="stylesheet" /> <link href="~/jquery-easyui-1.5.5.2/themes/icon.css" rel="stylesheet" /> <div style="margin:20px;width:1100px"> <table id="dgv"></table> </div> <script src="~/Scripts/EasyUI/DataGrid.js"></script> <script> $(document).ready((function () { // 這個地方必須要放在這個里面，否則會導致有邊框不顯示 showDataGrid("#dgv"); })); </script>
展示：
