下面整理了关于easyui的datagrid的开发文档,复制黏贴即刻使用
1 1: 2 <link href="../../Content/easyUI/themes/default/easyui.css" rel="stylesheet" type="text/css" /> 3 <link href="../../Content/easyUI/themes/icon.css" rel="stylesheet" type="text/css" /> 4 <script src="../../Scripts/jquery-1.4.4.min.js" type="text/javascript"></script> 5 <script src="../../Scripts/jquery.easyui.min.js" type="text/javascript"></script> 6 <script src="../../Scripts/easyui-lang-zh_CN.js" type="text/javascript"></script> 7 <script src="../../Scripts/datapattern.js" type="text/javascript"></script> 8 9 2:<script type="text/javascript"> 10 $(function(){ 11 loadData(); 12 }); 13 14 function loadData() { 15 $('#tt').datagrid({ 16 url: '/Home/GetUserInfo', 17 title: '用户数据表格', 18 700, 19 height: 400, 20 fitColumns: true, //列自适应 21 nowrap: false, 22 idField: 'ID',//主键列的列明 23 loadMsg: '正在加载用户的信息...', 24 pagination: true,//是否有分页 25 singleSelect: false,//是否单行选择 26 pageSize:2,//页大小,一页多少条数据 27 pageNumber: 1,//当前页,默认的 28 pageList: [2, 5, 10], 29 queryParams: {},//往后台传递参数 30 columns: [[//c.UserName, c.UserPass, c.Email, c.RegTime 31 { field: 'ck', checkbox: true, align: 'left', 50 }, 32 { field: 'ID', title: '编号', 80 }, 33 { field: 'UserName', title: '姓名', 120 }, 34 { field: 'UserPass', title: '密码', 120 }, 35 { field: 'Email', title: '邮箱', 120 }, 36 { field: 'RegTime', title: '时间', 80, align: 'right', 37 formatter: function (value, row, index) { 38 return (eval(value.replace(//Date((d+))//gi, "new Date($1)"))).pattern("yyyy-M-d"); 39 } 40 } 41 ]], 42 toolbar: [{ 43 id: 'btnGet', 44 text: '删除', 45 iconCls: 'icon-add', 46 handler: function () { 47 var rows = $('#tt').datagrid('getSelections'); 48 if (!rows || rows.length == 0) { 49 //alert("请选择要修改的商品!"); 50 $.messager.alert("提醒", "请选择要删除的记录!", "error"); 51 return; 52 } 53 54 } 55 }], 56 }); 57 } 58 </script> 59 60 61 62 3<div> 63 <table id="tt" style=" 700px;" title="标题,可以使用代码进行初始化,也可以使用这种属性的方式" iconcls="icon-edit"> 64 </table> 65 </div> 66 67 68 69 70 //将序列化成json格式后日期(毫秒数)转成日期格式 71 function ChangeDateFormat(cellval) { 72 var date = new Date(parseInt(cellval.replace("/Date(", "").replace(")/", ""), 10)); 73 var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1; 74 var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate(); 75 return date.getFullYear() + "-" + month + "-" + currentDate; 76 }