你的位置:首页 > ASP.net教程

[ASP.net教程]easyui 快速开发整理


下面整理了关于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         width: 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.RegTime31           { field: 'ck', checkbox: true, align: 'left', width: 50 },32           { field: 'ID', title: '编号', width: 80 },33           { field: 'UserName', title: '姓名', width: 120 },34            { field: 'UserPass', title: '密码', width: 120 },35            { field: 'Email', title: '邮箱', width: 120 },36           { field: 'RegTime', title: '时间', width: 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="width: 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 }