Jquery table jqgrid operation notes.

1. Reference

 
<Link type = "text/CSS" href = "CSS/UI-lightness/jquery-ui-1.8.14.custom.css" rel = "stylesheet"/> <link type = "text/CSS" href = "CSS /ui.jqgrid.css "rel =" stylesheet "/> <SCRIPT type =" text/JavaScript "src =" JS/jquery-1.5.1.min.js "> </SCRIPT> <SCRIPT type =" text/JavaScript" src = "JS/jquery-ui-1.8.14.custom.min.js"> </SCRIPT> <SCRIPT type = "text/JavaScript" src = "JS/grid. locale-cn.js & gt; </script & gt; <SCRIPT type = "text/JavaScript" src = "JS/jquery. jqgrid. min. JS "> </SCRIPT>
 

Note that jqgrid is placed behind grid. locale-cn.js. Otherwise, an error is reported.

2. Pure JS example

Jquery ("# editgrid "). jqgrid ({datatype: "local", height: 450, colnames: ['number', 'username ', 'Gender', 'mailbox ', 'qq', 'mobile phone number ', 'birthdate '], colmodel: [{Name: 'id', index: 'id', width: 200, sorttype: "int"}, {Name: 'username ', index: 'username', width: 200}, {Name: 'gender', index: 'gender', width: 90}, {Name: 'email ', index: 'email ', width: 125, sorttype: "string"}, {Name: 'qq', index: 'qq', width: 100}, {Name: 'lelephone ', index: 'lelephone', width: 120}, {Name: 'birthday', index: 'birthday', width: 100, sorttype: "date"}], sortname: 'id', sortorder: 'asc ', viewrecords: True, rownum: 10, rowlist: [10, 20, 30], pager: "# gridpager", caption :""}). navgrid ('# gridpager', {EDIT: True, add: True, del: true}); var mydata = [{ID: "1", Username: "Polaris ", gender: "male", email: "fef@163.com", QQ: "33334444", mobilephone: "13223423424", birthday: "1985-10-01" },{ ID: "2", Username: "Li Si", Gender: "female", email: "faf@gmail.com", QQ: "222222222", mobilephone: "13223423", birthday: "1986-07-01"}, {ID: "3", Username: "Wang Wu", Gender: "male", email: "fae@163.com", QQ: "99999999", mobilephone: "1322342342", birthday: "1985-10-01"}, {ID: "4", Username: "Ma 6", Gender: "female", email: "aaaa@gmail.com", QQ: "23333333", mobilephone: "132234662", birthday: ""}]; for (VAR I = 0; I <= mydata. length; I ++) jquery ("# editgrid "). jqgrid ('addrowdata', I + 1, mydata [I]);

<Table id = "editgrid"> </table>
<Div id = "gridpager"> </div>

3. Editable field configuration

Colmodel: [{Name: 'id', index: 'id', width: 55, Editable: false, editoptions: {readonly: True, size: 10}, formatter: 'integer', formatoptions: {thousandsseparator: "," }}, {Name: 'invdate', index: 'invdate', width: 80, Editable: True, editoptions: {size: 10}, formatter: 'date', formatoptions: {srcformat: 'Y-m-d', newformat: 'y/M/d' }}, {Name: 'name', index: 'name', width: 90, Editable: True, editoptions: {size: 25 }}, {Name: 'amount', index: 'amount ', width: 60, align: "right", Editable: True, formatter: 'currency ', formatoptions: {thousandsseparator: "", decimalseparator: ",", Prefix: "€" }}, {Name: 'Tax ', index: 'Tax', width: 60, align: "right", Editable: True, editoptions: {size: 10 }},{ name: 'Total', index: 'Total', width: 60, align: "right", Editable: True, editoptions: {size: 10 }}, {Name: 'closed ', index: 'closed', width: 55, align: 'center', Editable: True, edittype: "checkbox", editoptions: {value: "Yes: No" }}, {Name: 'ship _ Ve', index: 'ship _ Ve', width: 70, Editable: True, edittype: "select ", editoptions: {value: "Fe: FedEx; TN: TNT" }},{ name: 'note', index: 'note', width: 100, sortable: false, Editable: true, edittype: "textarea", editoptions: {rows: "2", cols: "20"}],

4. JSON format returned by the server

 
$ Responce-> page = 2; // current page $ Responce-> total = 3; // total page $ Responce-> records = 20; // Total number of items for ($ I = 0; $ I <10; $ I ++) {$ Responce-> rows [$ I] ['id'] = $ I; $ Responce-> rows [$ I] ['cell '] = array ($ I, date ("Y-m-d h: I: s "), 'mainmaster ');} echo json_encode ($ Responce );
 

5. XML format

Echo "<? XML version = '1. 0' encoding = 'utf-8 '? $ Et \ n "; echo" <rows> "; echo" <page> 1 </Page> "; echo" <total> 1 </total> "; echo "<records> 1 </records>"; // be sure to put text data in cdatawhile ($ ROW = mysql_fetch_array ($ result, mysql_assoc )) {echo "<row>"; echo "<cell> ". $ row [account_id]. "</cell>"; echo "<cell> ". $ row [name]. "</cell>"; echo "<cell> ". $ row [acc_num]. "</cell>"; echo "<cell> ". $ row [debit]. "</cell>"; echo "<cell> ". $ row [credit]. "</cell>"; echo "<cell> ". $ row [balance]. "</cell>"; echo "<cell> ". rand (0, 1 ). "</cell>"; echo "<cell> ". $ row [level]. "</cell>"; echo "<cell> ". $ row [LFT]. "</cell>"; echo "<cell> ". $ row [rgt]. "</cell>"; if ($ row [rgt] = $ row [LFT] + 1) $ leaf = 'true'; else $ leaf = 'false '; echo "<cell> ". $ leaf. "</cell>"; echo "<cell> true </cell>"; echo "</row>" ;}echo "</rows> ";

6. Submitted data

_ Searchfalsend1311834540399page1rows10sidxidsorddesc
 

 
_ Searchtruefiltersnd1311836578173page1rows10searchfieldidsearchopereqsearchstringsidxidsorddesc
 

7. Cell editing

 
Cellurl: "<? PHP echo site_url ("admin/demo/edit2")?> ", Celledit: True,
 

Refer:

Http://blog.sina.com.cn/s/blog_4496b0890100ri4d.html

Http://blog.csdn.net/gengv/article/details/5714834