easyui之datagrid的使用

http://www.cnblogs.com/ruanmou001/p/3840954.html

一、神马是easyui

jQuery EasyUI是一组基于jQuery的UI插件集合，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。

jQuery EasyUI为我们提供了大多数UI控件的使用，如：accordion，combobox，menu，dialog，tabs，tree，validatebox，window等等。

下载地址：

http://pan.baidu.com/s/1eQgm9fc

二、目录说明

三、搭建环境

引入：

四、datagrid的使用

先上效果：

布局用easyui里面的layout做的

数据加载实现方法：

  1 //页面加载初始化
  2 $(function () {
  3     GetUserList(GetSqlWhere());
  4 });
  5 
  6 //获取查询条件
  7 function GetSqlWhere() {
  8     var strWhere = "1=1";
  9     var username = $.trim($("#stxtUserName").val());
 10     var phase = $("#ssPhase").val();
 11     if (username != "") {
 12         strWhere += " and UserName='" + username + "'";
 13     }
 14     if (phase != "0") {
 15         strWhere += " and Phase='" + phase + "'";
 16     }
 17     return strWhere;
 18 }
 19 
 20 //获取用户列表
 21 function GetUserList(strWhere) {
 22     $("#dg").datagrid({
 23         url: "ajax/UserMAjax.ashx",
 24         queryParams://每次请求的参数
 25             {
 26                 cmd: 'list',
 27                 strWhere: strWhere
 28             },
 29         pagination: true,//允许分页
 30         rownumbers: true,//行号
 31         singleSelect: false,//只选择一行
 32         pageSize: 15,//每一页数据数量
 33         checkOnSelect: false,
 34         pageList: [5, 10, 15, 20, 25],
 35         columns: [[{
 36             field: 'id',
 37             checkbox: true,
 38         },
 39         {
 40             field: "UserId",
 41             title: "用户ID",
 42             align: "center",
 43             width: 50
 44         }, {
 45             field: "RealName",
 46             title: "学生姓名",
 47             align: "center",
 48             width: 100
 49         }, {
 50             field: "ClassId",
 51             title: "学生类型",
 52             align: "center",
 53             width: 100,
 54             formatter: function (val, row) {
 55                 if (val == 1) {
 56                     return ".NET学员";
 57                 }
 58                 else if (val == 2) {
 59                     return "JAVA学员";
 60                 }
 61             }
 62         }, {
 63             field: "UserName",
 64             title: "用户名",
 65             align: "center",
 66             width: 100
 67         }, {
 68             field: "Pwd",
 69             title: "密码",
 70             align: "center",
 71             width: 100
 72         }, {
 73             field: "PhoneNum",
 74             title: "电话号码",
 75             align: "center",
 76             width: 100
 77         }
 78         , {
 79             field: "Sex",
 80             title: "性别",
 81             align: "center",
 82             width: 50
 83         }, {
 84             field: "Phase",
 85             title: "班级",
 86             align: "center",
 87             width: 130
 88         }, {
 89             field: "QQ",
 90             title: "QQ",
 91             align: "center",
 92             width: 100
 93         }, {
 94             field: "UserType",
 95             title: "权限身份",
 96             align: "center",
 97             width: 120,
 98             formatter: function (val, row) {
 99                 if (val == 1) {
100                     return "管理员";
101                 }
102                 else if (val == 2) {
103                     return "讲师";
104                 }
105                 else if (val == 3) {
106                     return "正式学员";
107                 }
108                 else if (val == 4) {
109                     return "咨询者";//下午05，57分钟
110                 }
111             }
112         }, {
113             field: "HeadPic",
114             title: "头像地址",
115             align: "center",
116         }, {
117             field: "ClientIP",
118             title: "注册IP",
119             align: "center",
120             width: 100
121         }, {
122             field: "CreatedTime",
123             title: "注册时间",
124             align: "center",
125             width: 100,
126             formatter: function (val, row) {
127                 var str1 = val.indexOf("(")
128                 var str2 = val.lastIndexOf(")");
129                 var dateValue = val.substring(str1 + 1, str2);
130                 var date = new Date(parseInt(dateValue));
131                 return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + " " + date.getHours() + ":" + date.getMinutes();
132             }
133 
134         }, {
135             field: "Message",
136             title: "留言",
137             align: "center"
138 
139         }
140         ]],
141 
142         //点击每一行的时候触发
143         //onClickRow: function (rowIndex, rowData) {
144         //    alert(rowData["UserId"]);
145         //}
146     });
147 }

查找：

function SelUser() {
    var s = GetSqlWhere();
    GetUserList(s);
}