在浏览导航栏添加所需按钮
<! Doctype html> <html> <fead> <meta charset = "utf-8"/> <title> damo </title> <link rel = "stylesheet" type = "text/css" href = "css/jQuery-ui.min.css"/> <Link rel = "stylesheet" type = "text/csss" href = "css/jquery-ui.theme.min.css"/> <link rel = "stylesheet" type = "text/css" href = "css/ui.jqgrid-bootstrap-ui.css"/> <link rel = "stylesheet" type = "text/css" " href = "css/ui.jqgrid.css"/> </head> <body> <div id = "main"> <!-jqgrid 所在-> <table id = "grid-table"> </table> <!-jqgrid 浏览导航栏所在-> <div ID = "grid-pager"> </div> </siv> <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/javascript" 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", name: "ABC", Text: "AAA"}, {id: "00003", type: "退货出库", Pay: "1040.06", nombre: "ABC", Texto: "DDD"}]; var Grid_selector = " = "#grid-pager";$(document).ready(function() {$("#grid-table").jqGrid({data: grid_data, //当 datatype 为"local" 时需填写 datatype: "local", //数据来源，本地数据（local，json,jsonp,xml等）height: 150, // 高度 ， 表格高度。可为数值、百分比或 'Auto' // mtype: "get", // 提交方式 colnames: ['出库单号', '出库类型', '总金额', '申请人（单位）', '备注'], colmodel: [{name: 'id', índice: 'id', // 索引。其和后台交互的参数为 sidXKey: true, // 当从服务器端返回的数据中没有 时 时 将此作为唯一 将此作为唯一 使用只有一个列可以做这项设置。如果设置多于一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 其他被忽略 其他被忽略 其他被忽略 其他被忽略 其他被忽略 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个 那么只选取第一个100, Editable: False, EditOptions: {size: "20", maxLength: "30"}}, {name: 'type', index: 'type', width: 200, // 宽度 editable: true, // 是否可编辑 edittype: "seleccione", // ： haga texte, textárea, selección, comprobación, contraseña, botón, imagen y archivo. "1: 采购入库; 2: 退用入库"}}, {nombre: 'Pay', índice: 'Pay', Width: 60, Sortype: "Double", Editable: True}, {name: 'Name', índice: 'name', width: 150, editable: true, editOptions: {size: "20", maxLength: "30"}}}, {nombre: 'text', ',' text ',', ',', ',', ',', ',', ',', ',', ',', ',', ',', ',', ',', ',' text: 'Text', ',', ',', ',', ',', ',', ',' text: 'Text', ',', ',', ',', ',' text: 250, ordenable: falso, editable: true, edittype: "textArea", editOptions: {filas: "2", cols: "10"}}},], ViewRecords: true, // 是否在浏览导航栏显示记录总数 Rownum: 10, // 每页显示记录数 RowList: [10, 20, 30], // 用于改变显示行数的下拉列表框的元素数组。Pager: Pager_Selector, // 分页、按钮所在的浏览导航栏 Altrows: True, True, // 设置为交替行表格, 默认为 false // toppager: true, // 是否在上面显示浏览导航栏 multiselect: true, // 是否多选 // multikey: "ctrlkey", // 是否只能用 ctrl 按键多选 multiboxonly: true, // 是否只能点击复选框多选 // subgrid: true, // sortname: 'id', /// // sortorder: 'asc', // 默认的排序方式（ 升序 升序 升序 升序 ， ， ， ， 降序） 降序） 降序） 降序） 降序） 降序） 降序） 升序 升序 升序 升序 升序 升序 升序 ， ， ， ， 降序） 降序） 降序） 降序） 降序） 降序） 降序） 升序 升序 升序 升序 升序 升序 升序 升序 升序 升序 升序 升序 升序 升序 升序 升序 升序 升序 升序 升序 升序 升序 降序） 降序） 降序） 降序） 降序） 降序） 降序） 降序） // 表名 AUTOWIDTH: true // 自动宽}); // 浏览导航栏添加功能部分代码 $ (grid_selector) .navGrid (perger_selector, {search: true, // 检索 agregar: true, // 添加 （只有 editable 为 true 时才能显示属性） edit: true, // 修改（只有 editable 为 true 时才能显示属性） 时才能显示属性） 时才能显示属性） 时才能显示属性） 时才能显示属性） 时才能显示属性） 时才能显示属性） 时才能显示属性） 时才能显示属性） 时才能显示属性） 时才能显示属性） 时才能显示属性） 时才能显示属性） 时才能显示属性） 时才能显示属性） 时才能显示属性） 时才能显示属性） 时才能显示属性） 时才能显示属性） 时才能显示属性） 时才能显示属性） 时才能显示属性） 时才能显示属性） 时才能显示属性） 时才能显示属性） 时才能显示属性） // Agregar opciones {}, // Eliminar opciones {múltiplesearch: true} // opciones de búsqueda - define múltiples búsqueda);}); </script> </body> </html>效果如下 ：
ID 的 Editable 为 Falso 所以不能被编辑
下面是具体的检索选项
首先是 所有/任意 对应逻辑为 y/o
然后一般检索的包含选项有
本例中把 paga 的 sorttype 设置成了 "doble" 类型 （int 型也是一样 ， 不过显示时会省略小数 ， 请注意）所以 选项变为
检索是唯一能在不连接后台时使用成功的功能 其他功能都会提示设置 URL
以上所述是 jqgrid 学习笔记整理 ―lo (一) 。下篇 jqgrid 学习笔记整理 ―lo (二) ， 正式进入后台设计阶段 主要以最基本的 主要以最基本的 mvc dao 包的设计模式 面向初学。 面向初学。 面向初学。 面向初学。 面向初学。