Use of the Easyui DataGrid

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

First, God Horse is Easyui

The jquery Easyui is a set of jquery-based UI plug-ins, and the goal of jquery Easyui is to make it easier for web developers to create a feature-rich and beautiful UI interface. Developers do not need to write complex JavaScript, and do not need to have a deep understanding of CSS styles, developers need to understand only a few simple HTML tags. JQuery Easyui provides us with the use of most UI controls, such as Accordion,combobox,menu,dialog,tabs,tree,validatebox,window, and so on. : HTTP://PAN.BAIDU.COM/S/1EQGM9FC Ii. Description of the catalogue third, build the environment introduced:<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 "/> Iv. use of the DataGridFirst on the effect: layout with Easyui inside the data load implementation method:

  1//Page load initialization 2 $ (function () {3 getuserlist (Getsqlwhere ());  4});  5 6//Get Query Condition 7 function Getsqlwhere () {8 var strwhere = "1=1"; 9 var username = $.trim ($ ("#stxtUserName"). Val ()); Ten var phase = $ ("#ssPhase"). Val (); One if (username! = "") {strwhere + = "and username=" + username + "'"; + if (phase! = "0") {strwhere + = "and phase= ' + phase +" ' "; (+)-return strwhere;  18} 19 20//Get user List of function getuserlist (strwhere) {$ ("#dg"). DataGrid ({URL: "Ajax/usermajax.ashx", queryparams://per request parameter: ' list ', Strwhere:strwhere 2 8}, pagination:true,//allow paging to rownumbers:true,//line number singleselect:false,//select only one         Line + pagesize:15,//number of data per page checkonselect:false, pagelist: [5, 10, 15, 20, 25], 35 Columns: [[{field: ' id ', Notoginseng CHEckbox:true, max.: "UserId", "User ID", Alig             N: "Center", width:50, {"Realname", "title", "Student name", 47 Align: "center", width:100, {field: "ClassId", Wuyi titl                 E: "Student Type", Align: "center", Width:100, Formatter:function (Val, row) {55 if (val = = 1) {* * * return '. NET Learner "; (val = = 2) {"$") {"Java learner"; 60} "UserName", "The name of the user", "align": "Cen Ter "," width:100 ", {:" Pwd "," The password ", IGN: "Center", width:100, {fieLD: "Phonenum", "The number", "Align": "Center", width:100 77} 78 , {field: "Sex", "title": "Gender", Bayi align: "center", Width:5             0. "Phase", {$ field: "The Class", "Align", "center", 87             width:130, {field: "QQ", "QQ", "Align": "Center", 92  width:100, {94 field: "Usertype", "title", "Permission Identity", align: "Center", width:120, 98 formatter:function (val, row) {if (val = = 1) {10 0 return "admin"; 101}102 Else if (val = = 2) {103 RE                 Turn "lecturer"; 104}105 Else if (val = = 3) {106 return "formal learner"; 107             }108    else if (val = = 4) {109 return "consultant";//PM 05, 57 min 110}111}112             }, {113 field: "Headpic", under the title: "Avatar Address", Align: "center", 116}, {117         Field: "ClientIP", 118 title: "Registered IP", 119 align: "center", width:100121             }, {122 field: "Createdtime", 123 title: "Registration Time", 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: "Message", 137 align: "center" 138 139}140]],141 142//Click on each line when the trigger 143 Onclickrow:function (RowIndex, RowData) {144//alert (rowdata["UserId"]); 145//}146}); 147}

Find:

function Seluser () {    var s = getsqlwhere ();    Getuserlist (s);}

Add to:

function Saveuser () {    $ (' #fm '). Form (' Submit ', {        URL: "Ajax/usermajax.ashx?cmd=add",        success:function ( Data) {            var data = eval (' (' + data + ') ');  The change of the JSON string to JavaScript Object                if (data.rbool) {                window.location.reload ();            }            else {                $.messager.alert (' hint ', data.infor);}}    );}

Edit:

function Edituser () {    $ (' #fm '). Form (' Submit ', {        URL: ' ajax/usermajax.ashx?cmd=edit&userid= ' + userid,        success:function (data) {            var data = eval (' (' + data + ') ');  The change of the JSON string to JavaScript Object                if (data.rbool) {                window.location.reload ();            }            else {                $.messager.alert (' hint ', data.infor);}}    );}

Usermajax.ashx Page Content:

  1 public class Usermajax:ihttphandler 2 {3 String infor = "";  4 bool Rbool = FALSE;  5 String json = "";  6 HttpContext context;  7 int userid;             8 public void ProcessRequest (HttpContext context) 9 {Ten this.context = context; 12 Context. request.contentencoding = encoding.getencoding ("Utf-8"); Must be added, otherwise it will produce garbled 13//Receive browser get/post over the parameter cmd + string cmd = context. request["cmd"]. ToString ();  Switch (CMD) page {case "list": JSON = GetList (); break; "Add": JSON = AddUser (); At a break; Case "Del": JSON = Deluser (); break; Case "GetUser": JSON = GetUser (); break;            30     Case "edit": JSON = Edituser (); break; The context. Response.Write (JSON); * * * public string Edtuser () PNs {""; *//<summary> 41//For users///</summary>//<returns ></returns> public String GetUser () {string userids = context. request.form["Euserids"]. ToString (); Userinfor user = null; Try $ {user = UserInforDal.m_UserInforDal.GetModel (Convert.ToInt32 (userids )); Wuyi Rbool = true; (Exception ex) infor = "Data acquisition failed, error message:" + ex. Message; JavaScriptSerializer JSS = new JavaScriptSerializer (); Dictionary<string, object> d = new dictionary<string, objecT> (); D.add ("user", user); D.add ("Rbool", Rbool); D.add ("Infor", infor); JSS return. Serialize (d); +//<summary> 65//Get user list///</summary>//<retur ns></returns>-public string GetList () {Sqlwhere = context. request.form["Strwhere"]. ToString (); pageindex int = Convert.ToInt32 (context. request.form["Page"]. ToString ()); pagesize int = Convert.ToInt32 (context. request.form["Rows"]. ToString ()); list<userinfor> List = UserInforDal.m_UserInforDal.GetList (Sqlwhere, pagesize, pageindex); A. Int. int count = UserInforDal.m_UserInforDal.GetCount (Sqlwhere); Topagejson return (list, count); 76} 77//Edit User Edituser public string () + () + UserID = Convert.ToInt32 (CO ntext. request.querystring["UserID"]. ToString ()); Bayi String realname = context. request.form["Realname"]. ToString (); ClassId string = context. request.form["ClassId"]. ToString (); The UserName string = context. request.form["UserName"]. ToString (); A string Pwd = context. request.form["PWD"]. ToString (); Phonenum string = context. request.form["Phonenum"]. ToString (); The string Sex = context. request.form["Sex"]. ToString (); Phase string = context. request.form["Phase"]. ToString (); Headpic string = context. request.form["Headpic"]. ToString (); if (string. IsNullOrEmpty (realname) | | ClassId = = "0" | | String. IsNullOrEmpty (UserName) | | String. IsNullOrEmpty (PWD) | | String. IsNullOrEmpty (phonenum) | | Sex = = "0" | | Phase = = "0") infor = "The items cannot be empty"; Userinfor user = UserInforDal.m_UserInforDal.GetModel (userid); 98 if (user! = null). Realname = realname;101 user. ClassId = Convert.ToInt32 (ClassId); 102 user. UserName = username;103 user. PWD = pwd;104 user. Phonenum = phonenum;105 user. Sex = sex;106 user. Phase = phase;107 user. Createdtime = datetime.now;108 user.  Headpic = headpic;109 UserInforDal.m_UserInforDal.Update (user), Rbool =                     true;111}112}113 catch (Exception ex) 114 {115 Infor = ex.             message;116}117}118 JavaScriptSerializer JSS = new JavaScriptSerializer (); 119 Dictionary<string, object> d = nEW dictionary<string, object> (), D.add ("Infor", infor), 121 d.add ("Rbool", Rbool); 122 Return JSS. Serialize (d); 123}124//<summary>125//delete user 126//</summary>127/ <returns></returns>128 public String Deluser () 129 {string UserIDs = Context . request.form["UserIDs"].                 ToString (); 131 try132 {133 if (Userids.contains ("_") = = False) 134 {135 UserInforDal.m_UserInforDal.Delete (Convert.ToInt32 (UserIDs)); 136 infor = "Delete into                     137 Rbool = true;138}139 else140 {141                     string[] Auserids = Userids.split ('_'); 142 for (int i = 0; i < auserids.length; i++) 143 {144 UserInforDal.m_UserInforDal.Delete (Convert.ToInt32 (auserIds[i]); 145}146 infor = "Delete succeeded"; 147 Rbool = true;148 }149}150 catch (Exception ex) 151 {infor = "Delete failed, error message:" + Ex. message;153}154 JavaScriptSerializer JSS = new JavaScriptSerializer (); 155 dictionary& Lt;string, object> d = new dictionary<string, object> (); 156 D.add ("Infor", infor); 157 d.a DD ("Rbool", Rbool); 158 return JSS. Serialize (d); 159}160//<summary>161//Add user 162//</summary>163/ <returns></returns>164 public String AddUser () 165 {166 String realname = Contex t.request.form["Realname"]. ToString (); 167 string ClassId = context. request.form["ClassId"]. ToString (); 168 string UserName = context. request.form["UserName"]. ToString (); 169 string PWD= Context. request.form["PWD"]. ToString (); Phonenum string = context. request.form["Phonenum"]. ToString (); 171 string Sex = context. request.form["Sex"]. ToString (); 172 string Phase = context. request.form["Phase"]. ToString (); 173 if (string. IsNullOrEmpty (realname) | | ClassId = = "0" | | String. IsNullOrEmpty (UserName) | | String. IsNullOrEmpty (PWD) | | String. IsNullOrEmpty (phonenum) | | Sex = = "0" | | Phase = = "0") 174 {175 Infor = "Items cannot be empty"; 176}177 else178 {1                     try180 {181 Userinfor user = new Userinfor (); 182 User. Realname = realname;183 user. ClassId = Convert.ToInt32 (ClassId); 184 user. UserName = username;185 user. PWD = pwd;186 user. Phonenum = phonenum;187 user. Sex = sex;188 user. Phase = phase;189                    User. Createdtime = datetime.now;190 user. Headpic = "Http://www.ruanmou.net/upfile/HeadPic/man.                     GIF "; 191 UserInforDal.m_UserInforDal.Add (user); 192 infor =" add success "; 193                     Rbool = true;194}195 catch (Exception ex) 196 {197 Infor = ex. message;198}199}200 201 JavaScriptSerializer JSS = new JavaScriptSerializer (); 20 2 dictionary<string, object> d = new dictionary<string, object> (); 203 D.add ("Infor", I nfor); 204 D.add ("Rbool", Rbool); 205 return JSS.         Serialize (d); 206}207//<summary>208//Specially JSON format string 209//</summary>210 <param name= "List" ></param>211//<param name= "Total" ></param>212//& lt;returns></returns>213 PubliC static String Topagejson (object list, int total) 214 {215 JavaScriptSerializer JSS = new Javascriptse Rializer (); 216 dictionary<string, object> d = new dictionary<string, object> (); 217 d.a DD ("Total", total), 218 d.add ("Rows", list), 219 return JSS. Serialize (d); 220}221}

Easyui API Download:

Http://pan.baidu.com/s/1sjsHrPj

Use of the Easyui DataGrid