一、神馬是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
新聞熱點
疑難解答
