一、神马是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二、目录说明
三、搭建环境引入：<script src="../easyui/jquery-1.8.0.min.js"></script><script src="../easyui/jquery.easyui.min.js"></script><link href="../easyui/themes/default/easyui.css" rel="stylesheet" />四、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: 100121 }, {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 }View Code查找：
function SelUser() { var s = GetSqlWhere(); GetUserList(s);}View Code添加：
function SaveUser() { $('#fm').form('submit', { url: "ajax/UserMAjax.ashx?cmd=add", success: function (data) { var data = eval('(' + data + ')'); // change the JSON string to Javascript object if (data.rbool) { window.location.reload(); } else { $.messager.alert('提示', data.infor); } } });}View Code编辑：
function EditUser() { $('#fm').form('submit', { url: "ajax/UserMAjax.ashx?cmd=edit&userid=" + userid, success: function (data) { var data = eval('(' + data + ')'); // change the JSON string to javascript object if (data.rbool) { window.location.reload(); } else { $.messager.alert('提示', data.infor); } } });}View CodeUserMAjax.ashx 页面内容：
1 public class UserMAjax : IHttpHandler 2 { 3
新闻热点
疑难解答
