Easyui quick development, easyui Development

Easyui quick development, easyui Development
The following is a document on the development of the easyui datagrid, Which is copied and pasted for immediate use.

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: 'user data table', 18 width: 700,19 height: 400,20 fitColumns: true, // column adaptive 21 nowrap: false, 22 idField: 'id', // The primary key column listing 23 loadMsg: 'Positive Loading user information... ', 24 pagination: true, // whether a page exists 25 singleSelect: false, // whether a single row selects 26 pageSize: 2, // page size, how many pieces of data per page 27 pageNumber: 1, // current page, default 28 pageList: [2, 5, 10], 29 queryParams :{}, // pass the parameter 30 columns to the background: [[// c. userName, c. userPass, c. email, c. regTime31 {field: 'ck ', checkbox: true, align: 'left', width: 50}, 32 {field: 'id', title: 'number', width: 80}, 33 {field: 'username', title: 'name', width: 120}, 34 {field: 'Userpass', title: 'Password', width: 120}, 35 {field: 'e-mail ', title: 'mailbox', width: 120}, 36 {field: 'regtime', title: 'time', 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: 'delete ', 45 iconCls: 'icon-add', 46 handler: function () {47 var rows = $ ('# Tt'). datagrid ('getselections'); 48 if (! Rows | rows. length = 0) {49 // alert ("select the item to modify! "); 50 $. messager. alert (" Reminder "," select the record to delete! "," 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 = "title, code can be used for initialization, you can also use this attribute to "iconcls =" icon-edit "> 64 </table> 65 </div> 66 67 68 69 70 // serialize the data into a date after the json format (MS) convert to date format 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}