1 新建DataGrid.js文件
/**** **el: table id* ***/
function showDataGrid(el) {$(el).datagrid({title: &#39;不分页的gridview&#39;,url: &#39;/Home/GetUserInfo&#39;, //一个用以从远程站点请求数据的超链接地址。method: &#39;get&#39;, //请求远程数据的方法类型 默认 postloadMsg: &#39;数据正在加载&#xff0c;请稍等...&#39;,//当从远程站点载入数据时&#xff0c;显示的一条快捷信息。autoRowHeight: true, //定义设置行的高度&#xff0c;根据该行的内容。设置为false可以提高负载性能。height: 1000, // 设置高度width: &#39;auto&#39;, //设置宽度striped: true,//设置为true将交替显示行背景。nowrap: true,//设置为true&#xff0c;当数据长度超出列宽时将会自动截取。rownumbers: true,//设置为true将显示行数。singleSelect: true,//设置为true将只允许选择一行。sortName: &#39;Age&#39;, //当数据表格初始化时以哪一列来排序。sortOrder: &#39;asc&#39;,//定义排序顺序&#xff0c;可以是&#39;asc&#39;或者&#39;desc&#39;&#xff08;正序或者倒序&#xff09;。showFooter: false,//定义是否显示行底&#xff08;如果是做统计表格&#xff0c;这里可以显示总计等&#xff09; cache: true,iconCls: &#39;icon-save&#39;, // 设置表头的图标collapsible: true, //右上角可以折叠toolbar: toolbar,columns: [[{field: &#39;&#39;,title: &#39;&#39;,checkbox: true}, {field: &#39;Name&#39;,title: &#39;姓名&#39;,width: 100,sortable: true, //设置为true允许对该列排序。rowspan: 1, //表明一个单元格跨几行。colspan: 1, // 表明一个单元格跨几列。hidden: false,//设置为true将隐藏列。//格式化单元格函数&#xff0c;有3个参数&#xff1a;//value&#xff1a;字段的值。// rowData&#xff1a;行数据。// rowIndex&#xff1a;行索引。formatter: function (value, row, index) {if (index &#61;&#61; 1) {return &#39;sasasas&#39;;}elsereturn value;},//单元格样式函数&#xff0c;返回样式字符串装饰表格如&#39;background:red&#39;&#xff0c;function有3个参数&#xff1a;//value&#xff1a;字段值。// rowData&#xff1a;行数据。// rowIndex&#xff1a;行索引。styler: function (value, row, index) {if (index <9)return &#39;background-color:yellow;color:red;&#39;;},editor: &#39;text&#39;},{ field: &#39;Age&#39;, title: &#39;年龄&#39;, width: 100 },{ field: &#39;Work&#39;, title: &#39;工作&#39;, width: 100 },]],fitColumns: true,rowStyler: function (index, row) { //返回样式&#xff0c;如&#xff1a;&#39;background:red&#39;&#xff0c;function有2个参数&#xff1a;if (index &#61;&#61; 10) // index&#xff1a;行索引&#xff0c;从0开始.return &#39;background-color:red;color:#fff;&#39; // row&#xff1a;对应于该行记录的对象。 },// 以下三个属性 分组//groupField: &#39;Name&#39;, //view:groupview, // 这个 function 要自己写//groupFormatter: function (value, rows) { // 值// return &#39;分组&#39; - value &#43; &#39; - &#39; &#43; rows.length &#43; &#39; Item(s)&#39;; //rows 总的个数 //}});
}
// 定义toolbar
var toolbar &#61; [{text: &#39;Add&#39;,iconCls: &#39;icon-add&#39;,handler: function () { alert(&#39;add&#39;) }
}, {text: &#39;Cut&#39;,iconCls: &#39;icon-cut&#39;,handler: function () { $.messager.alert(&#39;info&#39;,&#39;cut&#39;) }
}, &#39;-&#39;, {text: &#39;Save&#39;,iconCls: &#39;icon-save&#39;,handler: function () { alert(&#39;save&#39;) }
}];
2 前端使用&#xff1a;
<script src&#61;"~/jquery-easyui-1.5.5.2/jquery.min.js">script>
<script src&#61;"~/jquery-easyui-1.5.5.2/jquery.easyui.min.js">script>
<script src&#61;"~/jquery-easyui-1.5.5.2/locale/easyui-lang-zh_CN.js">script>
<link href&#61;"~/jquery-easyui-1.5.5.2/themes/default/easyui.css" rel&#61;"stylesheet" />
<link href&#61;"~/jquery-easyui-1.5.5.2/themes/icon.css" rel&#61;"stylesheet" /><div style&#61;"margin:20px;width:1100px"><table id&#61;"dgv">table>div><script src&#61;"~/Scripts/EasyUI/DataGrid.js">script><script>$(document).ready((function () {// 这个地方必须要放在这个里面&#xff0c;否则会导致有边框不显示
showDataGrid("#dgv");}));script>
展示&#xff1a;