在浏览导航栏添加所需按钮
<! Doctype html> <html> <head> <meta charset = "utf-8"/> <title> demo </title> <link rel = "styleSheet" type = "text/css" href = "css/jquery-ui.min.css"/> <link relsheet "type/qui.min.css"/> <link rel = " href = "css/jquery-ui.theme.min.css"/> <link rel = "stylesheet" type = "text/css" href = "css/ui.jqgrid-bootstrap-ui.css"/> <link rel = "stylesheet" type = "css-ui. /> </head> <body> <div id = "main"> <!-jqgrid 所在-> <table id = "grid-table"> </table> <!-jqgrid 浏览导航栏所在-> <div id = "grid-pager"> </div> </div> <script src = "js/jquery-1.11.0.min.js" type = "js/jquery-1.11.0.min.js" 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 = "javascript" js/jquery.jqgrid.min.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", имя: "ABC", текст: "AAA"}, {id: "00003", тип: "退货出库", платеж: "1040.06", имя: "ABC", текст: "ddd"}]; var grid_selector = "#grid-table"; var pager_selector = "#grid-pager"; $ (документ). {$ ("#grid-table"). jqgrid ({data: grid_data, // 当 DataType 为 "Local" 时需填写 DataType: "Local", // 数据来源 ， 本地数据 （Local ， Json, JSONP, XML 等） Высот: 150, // 表格高度。可为数值、百分比或 表格高度。可为数值、百分比或 表格高度。可为数值、百分比或 表格高度。可为数值、百分比或 表格高度。可为数值、百分比或 表格高度。可为数值、百分比或 表格高度。可为数值、百分比或 表格高度。可为数值、百分比或 表格高度。可为数值、百分比或 表格高度。可为数值、百分比或['出库单号', '出库类型', '总金额', '申请人 （单位）,' 备注 '], Colmodel: [{name:' id ', index:' id ', // 索引。其和后台交互的参数为 sidxkey: true, // 当从服务器端返回的数据中没有 id 时 ， 将此作为唯一 将此作为唯一 使用只有一个列可以做这项设置。如果设置多于一个 使用只有一个列可以做这项设置。如果设置多于一个 那么只选取第一个 那么只选取第一个 ， 其他被忽略 其他被忽略 其他被忽略 其他被忽略 其他被忽略 其他被忽略 其他被忽略 其他被忽略 其他被忽略 其他被忽略 其他被忽略 其他被忽略 其他被忽略 其他被忽略 其他被忽略 其他被忽略 其他被忽略 其他被忽略 其他被忽略 其他被忽略 其他被忽略 其他被忽略 其他被忽略 那么只选取第一个 其他被忽略 其他被忽略 其他被忽略 其他被忽略 其他被忽略 那么只选取第一个 那么只选取第一个 其他被忽略 其他被忽略"30"}}, {name: 'type', index: 'type', width: 200, // 宽度 редактируемое: true, // 是否可编辑 edittype: "select", // 可以编辑的类型。可选值 ： Текст, Textarea, Select, Checkbox, пароль, кнопку, изображение и файл. 'Pay', ширина: 60, Sorttype: «Double», редактируемое: true}, {name: «name», index: «имя», ширина: 150, редактируемое: true, editoptions: {size: «20», Maxlength: «30»}}, {name: 'Text', edex: 'Text', Width: 250, Сортука: edittite: "Textarea", Editoptions: {Rows: "2", Cols: "10"}},], ViewRecords: true, // 是否在浏览导航栏显示记录总数 Rownum: 10, // 每页显示记录数 Rowlist: [10, 20, 30], // 用于改变显示行数的下拉列表框的元素数组。pager: pager_selector, // 分页、按钮所在的浏览导航栏 altrow // 是否多选 // Multikey: "ctrlkey", // 是否只能用 ctrl 按键多选 Multiboxonly: true, // 是否只能点击复选框多选 // subgrid: true, // sortname: 'id', // 默认的排序列名 // sortorder: 'asc', // 默认的排序方式 （升序 升序 降序 降序））） 降序 降序 降序 降序 降序 降序 降序 降序 降序 默认的排序列名 默认的排序列名 默认的排序列名 默认的排序列名 默认的排序列名 默认的排序列名 采购退货单列表 采购退货单列表 采购退货单列表 表名 降序 ， ， // 自动宽}); // 浏览导航栏添加功能部分代码 $ (grid_selector) .navgrid (pager_selector, {search: true, // 检索 add: true, // 添加 （只有 edable 为 true 时才能显示属性） Редактирование: true, // 修改 （只有 entable 为 true 时才能显示属性 del: true, // rewers Options {}, // добавить параметры {}, // delete options {multipleSearch: true} // Параметры поиска - определить несколько поисков);}); </script> </body> </html>效果如下 ：
ID 的 редактируемое 为 False 所以不能被编辑
下面是具体的检索选项
首先是 所有/任意 对应逻辑为 и/или
然后一般检索的包含选项有
本例中把 Платеть 的 Sorttype 设置成了 «Double» 类型 (int 型也是一样 ， 不过显示时会省略小数 ， 请注意） 所以 选项变为 选项变为 选项变为 选项变为 选项变为 选项变为
检索是唯一能在不连接后台时使用成功的功能 其他功能都会提示设置 URL
以上所述是 jqgrid 学习笔记整理 ― 进阶篇 (一) 。下篇 jqgrid 学习笔记整理 ― 进阶篇 (二) ， 正式进入后台设计阶段 ， 主要以最基本的 mvc dao 包的设计模式 面向初学。 面向初学。 面向初学。 面向初学。 面向初学。