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.RegTime
31                     { 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 }

 

posted @ 2015-08-17 19:13  秋梦边缘  阅读(789)  评论(0)  编辑  收藏  举报