在浏览导航栏添加所需按钮
<! Doctype html> <html> <éadf> <meta charset = "utf-8" /> <tight> démo </ title> <link rel = "stylesheet" type = "text / css" href = "css / jQuery-Ui.min.css" /> <link rel = "Styleheet" type = "text / css" href = "css / jquery-ui.theme.min.css" /> <lin /> </ head> <body> <div id = "main"> <! - jqgrid 所在 -> <table id = "grid-table"> </ table> <! - jqgrid 浏览导航栏所在 -> <div id = "grid-pager"> </ div> </iv> <script src = "js / jquery-1.11.0.min.js" type = "Text / javascript" charset = "utf-8"> </ script> <script src = "js / i18n / grid.locale-cn.js" type = "text / javascript" charset = "utf-8"> </ script> <script src = "js / jQuery.jqgrid.min.js" type = "text / javascrip type = "text / javascript"> // 当 dataType 为 "local" 时需填写 var grid_data = [{id: "00001", type: "退货出库", pay: "1000", name: "ABC", text: "ccc"}, {id: "00002", type: "退货出库", pay: "1000" {id: "00003", type: "退货出库", payer: "1040.06", nom: "ABC", texte: "ddd"}]; var grid_selector = "# grid-table"; var pager_select GRID_DATA, // 当 DataType 为 "local" 时需填写 DataType: "local", // 数据来源 , 本地数据 (local , json, jsonp, xml 等) hauteur: 150, // 高度 , 表格高度。可为数值、百分比或 表格高度。可为数值、百分比或 `` auto '// mtype: "get", // 提交方式 ColNames: [' 出库单号 '', '出库类型' ',' 总金额 ', '申请人 (单位))', '备注'], colmodel: [{name: 'id', index: 'id', // 索引。其和后台交互的参数为 sidxkey: true, // 当从服务器端返回的数据中没有 当从服务器端返回的数据中没有 id 时 , 将此作为唯一 rowid 使用只有一个列可以做这项设置。如果设置多于一个 , 那么只选取第一个 , 其他被忽略 width: 100, editable: false, editOptions: {size: "20", maxLegth: "30"}, {{nue: ', index:, maxLegth: "30"}, {{nue: " 'type', largeur: 200, // 宽度 modifiable: true, // 是否可编辑 editType: "select", // 可以编辑的类型。可选值 : Text, textarea, sélection, case, mot de passe, bouton, image et fichier. true}, {name: 'name', index: 'name', width: 150, éditable: true, éditoptions: {size: "20", maxLength: "30"}}, {name: 'text', index: 'text', width: 250, sortable: false, editable: true: ",", Colleaa ", editoptions: {rows:" 2, " "10"}},], ViewRecords: true, // 是否在浏览导航栏显示记录总数 Rownum: 10, // 每页显示记录数 RowList: [10, 20, 30], // 用于改变显示行数的下拉列表框的元素数组。pager: pager_select "ctrlKey",//是否只能用Ctrl按键多选multiboxonly: true, //是否只能点击复选框多选// subGrid : true, //sortname:'id',//默认的排序列名//sortorder:'asc',//默认的排序方式(asc升序,desc降序)caption: "采购退货单列表", //表名autowidth: true // 自动宽}); // 浏览导航栏添加功能部分代码 $ (grid_selector) .navgrid (pager_selector, {search: true, // 检索 ajouter: true, // 添加 (只有 modifiable 为 true 时才能显示属性) edit: true, // 修改 ((只有 为 为 为 true 时才能显示属性))) edit: restre Options {}, // Ajouter des options {}, // delete Options {Multiplesearch: true} // Options de recherche - Définir plusieurs recherche);}); </cript> </ body> </html>:
id 的 modifiable 为 faux 所以不能被编辑
下面是具体的检索选项
首先是 所有 / 任意 对应逻辑为 et / ou
然后一般检索的包含选项有
本例中把 Payer 的 sortype 设置成了 设置成了 设置成了 设置成了 类型 ((int 型也是一样 , 不过显示时会省略小数 , 请注意)) 所以 选项变为
检索是唯一能在不连接后台时使用成功的功能 其他功能都会提示设置 URL
以上所述是 jqgrid 学习笔记整理 ―oie 进阶篇 (一) 。下篇 jqgrid 学习笔记整理 ― lot