在浏览导航栏添加所需按钮
<! DocType html> <html> <head> <meta charset = "utf-8"/> <title> Demo </title> <link rel = "styleSheet" type = "text/css" href = "css/jquery-ui.min href = "css/jQuery-ui.theme.min.css"/> <link rel = "styleSheet" Typ = "text/css" href = "css/ui.jqGrid-stootstrap-ui.css"/> <link rel = "stilesheet" type "text/cs" text/cs "tex/cs" tex/cs "tex/cs" tex/cs "tex/cs" tex/cs "tex/cs" tex/CSS "tef =" ui /> </head> <body> <div id = "main"> <!-jqGrid 所在-> <table id = "grid-table"> </table> <!-jqGrid 浏览导航栏所在-> <div id = "grid-pager"> </div> </div> <src = "js/jquery-0.1. charset = "utf-8"> </script> <script src = "js/i18n/grid.locale-cn.js" type = "text/javaScript" charset = "utf-8"> </script> </script> </script Src = "js/jquery.jqGrid.Min.js" type ". type = "text/javaScript"> // 当 DataType 为 "Lokale" 时需填写 var grid_data = [{id: "00001", typ: "退货出库", pay: "1000", name: "abc", text: "ccc"}, {id: "00002 {ID: "00003", Typ: "退货出库", Pay: "1040.06", Name: "ABC", Text: "ddd"}]; var grid_selector = "#grid-table"; var pager_selector = "#Grid-Pager"; $ (Dokument). //当 datatype 为"local" 时需填写 datatype: "local", //数据来源，本地数据（local，json,jsonp,xml等）height: 150, //高度，表格高度。可为数值、百分比或'auto'//mtype:"GET",//提交方式colNames: ['出库单号', '出库类型', '总金额', '申请人（单位）', '备注'],colModel: [{name: 'id',index: 'id', //索引。其和后台交互的参数为sidxkey: true, //当从服务器端返回的数据中没有id时，将此作为唯一rowid使用只有一个列可以做这项设置。如果设置多于一个，那么只选取第一个，其他被忽略width: 100,editable: false,editoptions: {size: "20",maxlength: "30"}}, {name: 'type',index: 'type',width: 200, //宽度editable: true, //是否可编辑edittype: "select", // 可以编辑的类型。可选值 ： text, textArea, select, pokingbox, password, button, bild und file true,editoptions: {size: "20",maxlength: "30"}}, {name: 'text',index: 'text',width: 250,sortable: false,editable: true,edittype: "textarea",editoptions: {rows: "2",cols: "10"}}, ],viewrecords: true, //是否在浏览导航栏显示记录总数rowNum: 10, // 每页显示记录数 RowList: [10, 20, 30], // 用于改变显示行数的下拉列表框的元素数组。pager: pager_selector, // 分页、按钮所在的浏览导航栏 Altrows: TRUE, // 设置为交替行表格, 默认为 false // toppager: true, // 是否在上面显示浏览导航栏 multiselect: true, // 是否多选 // multikey: "ctrlkey", // 是否只能用 ctrl 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 //sortname:'id',//默认的排序列名//sortorder:'asc',//默认的排序方式（asc升序，desc降序）caption: "采购退货单列表", //表名autowidth: true //自动宽});//浏览导航栏添加功能部分代码$(grid_selector).navGrid(pager_selector, {search: true, // 检索add: true, //添加 （只有editable为true时才能显示属性）edit: true, // 修改（只有 editable 为 true 时才能显示属性） del: true, // 删除 aktualisieren: true // 刷新}, {}, // Optionen bearbeiten {}, // Optionen hinzufügen {}, // Optionen löschen {multiplesearch: true} // Suchoptionen - Define Mehrere Suche);}); </script> </body> </html>效果如下 ：
id 的 editable 为 false 所以不能被编辑
下面是具体的检索选项
首先是 所有/任意 对应逻辑为 und/oder
然后一般检索的包含选项有
本例中把 Bezahlung 的 SortType 设置成了 "doppelt" 类型 （int 型也是一样 ， 不过显示时会省略小数 ， 请注意）所以 选项变为 选项变为 选项变为
检索是唯一能在不连接后台时使用成功的功能 其他功能都会提示设置 URL
以上所述是 JQGRID 学习笔记整理 ― (一) 。下篇 JQGRID 学习笔记整理 ― 进阶篇 (二) ， 正式进入后台设计阶段 ， 主要以最基本的 MVC Dao 包的设计模式 面向初学。 面向初学。 面向初学。 面向初学。 面向初学。 进阶篇)