在浏览导航栏添加所需按钮
<! DOCTYPE html> <html> <head> <meta charset = "utf-8"/> <title> Demo </ititle> <link rel = "Stylesheet" type = "text/css" href = "css/jquery-ui.min.css"/> <link Rel = STYLEshet "Styleshet" Styleshet "Styleshet" Styleshet ") href = "css/jQuery-ui.theme.min.css"/> <link rel = "stylesheet" type = "text/css" href = "css/ui.jqgrid-bootstrap-ui.css"/> link = "Stylesheet" type = "text/cs/cs" HEXT/CSs " /> </ad Head> <body> <div id = "main"> <!-jqGrid 所在-> <tabela id = "grade-table"> </tabela> <!-jqGrid 浏览导航栏所在-> <div id = "grid-pager"> </div> </div> <script src = "js/jQuery-CRIG.1.0.min.J.JJ.JJ.JJJ" JS/JS/JQUIRCERCO "> charset = "utf-8"> </script> <script src = "js/i18n/grid.locale-cn.js" type = "text/javascript" charset = "utf-8"> </script> <script src = "js/jQuery.jqGrid.js.js" typen = "js/jQuery.jqgrid.js" charset="utf-8"></script><script type="text/javascript">//当 datatype 为"local" 时需填写 var grid_data = [{id: "00001",type: "退货出库",pay: "1000",name: "abc",text: "ccc"}, {id: "00002",type: "退货出库",pay: "1000", nome: "ABC", texto: "aaa"}, {id: "00003", tipo: "退货出库", pay: "1040.06", nome: "abc", text: "ddd"}]; var grid_selector = "#grid-table"; var PAGER_SELTECTR = "]; {$ ("#grade-table"). ['' ',' '', '' ',' '申请人 （单位' ',' ''], colmodel: [{name: 'id', index: 'id', // 索引。其和后台交互的参数为 sidxkey: true, // 当从服务器端返回的数据中没有 id 时 ， ， 将此作为唯一 rowid 使用只有一个列可以做这项设置。如果设置多于一个 ， 那么只选取第一个 ， ， width: 100, "editiction:" edit 当从服务器端返回的数据中没有 时 ， 将此作为唯一 rowid 使用只有一个列可以做这项设置。如果设置多于一个 ， 那么只选取第一个 ， ， width: 100, "editiction:" edit 当从服务器端返回的数据中没有 时 ， 将此作为唯一 rowid 使用只有一个列可以做这项设置。如果设置多于一个 ， 那么只选取第一个 ， ， width: 100, "ed. "30"}}, {name: 'type',index: 'type',width: 200, //宽度editable: true, //是否可编辑edittype: "select", //可以编辑的类型。可选值：text, textarea, select, checkbox, password, button, image and file.seditoptions: {value: "1:采购入库;2:退用入库"}}, {name: 'pay',index: 'pay',width: 60, Sorttype: "Double", Editable: True}, {Nome: 'Name', Index: 'Name', Largura: 150, Editável: True, Editoptions: {size: "20", maxLength: "30"}}, {Nome: 'texto', text: 'text', width: 250, "Sortable}}, ed: 'text', text: 'text', width: 250,"}}, ed, ed: 'text', 'text:' text ', width: 250, "Sortable: Falla {linhas: "2", cols: "10"}},], viewRecords: true, // 是否在浏览导航栏显示记录总数 rOwnum: 10, // 每页显示记录数 rowlist: [10, 20, 30], // 用于改变显示行数的下拉列表框的元素数组。pager: Pager_selector, // 分页、按钮所在的浏览导航栏 altrows: true, //, 默认为 默认为 //eect_elector, // 分页、按钮所在的浏览导航栏 Mult. "ctrlkey", // 是否只能用 ctrl 按键多选 multiboxonly: true, // 是否只能点击复选框多选 // subgrid: true, // sortName: 'id', // 默认的排序列名 // sortorder: 'asc', // 默认的排序方式 （asc 升序 ， descd 降序））））） 采购退货单列表 采购退货单列表 采购退货单列表 ", // 表名 （verdadeira: //自动宽});//浏览导航栏添加功能部分代码$(grid_selector).navGrid(pager_selector, {search: true, // 检索add: true, //添加 （只有editable为true时才能显示属性）edit: true, //修改（只有editable为true时才能显示属性）del: true, //删除refresh: true //刷新}, {}, // edit Opções {}, // Adicionar opções {}, // Excluir opções {multiplesearch: true} // opções de pesquisa - define pesquisas múltiplas);}); </script> </body> </html>效果如下
id 的 editável 为 falso 所以不能被编辑
下面是具体的检索选项
首先是 所有/任意 对应逻辑为 e/ou
然后一般检索的包含选项有
本例中把 Pagar 的 Sorttype 设置成了 “duplo” 类型 （int 型也是一样 ， ， 请注意 请注意） 所以 选项变为 选项变为 选项变为 选项变为
检索是唯一能在不连接后台时使用成功的功能 其他功能都会提示设置 URL
以上所述是 JQGrid 学习笔记整理 ― 进阶篇 (一) 。下篇 JQGrid 学习笔记整理 ― ― 进阶篇 (二) ， 正式进入后台设计阶段 ， 主要以最基本的 mvc dao 包的设计模式 面向初学。