在浏览导航栏添加所需按钮
<! doctype html> <html> <head> <meta charset = "utf-8"/> <title> demo </title> <link rel = "stylesheet" type = "text/css" href = "css/jquery-ui.min.cs"/> href = "css/jquery-ui.theme.min.css"/> <link rel = "stylesheet" type = "text/css" href = "css/ui.jqgrid-bootstrap-ui /> </head> <body> <div id = "main"> <!-jqgrid 所在-> <table id = "grid table"> </table> <!-jqgrid 浏览导航栏所在-> <div id = "grid-pager"> </viv> </viv> <script src = js/jquery-1.1.1.0.min 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 charset = "utf-8"> </script> <script type = "text/javaScript"> // 当 datatype 为 "local" 时需填写 var grid_data = [{id: "00001" ، type: "退货出库" ، pay: "1000" ، name: "1000" ، الاسم: "ABC" ، النص: "AAA"} ، {id: "00003" ، النوع: "退货出库" ، الدفع: "1040.06" ، الاسم: "ABC" ، النص: "DDD" {$ ("#grid-table"). jqgrid ({data: grid_data ، // 当 datatype 为 "local" 时需填写 type: "local" ، // 数据来源 ， 本地数据 （（（， ， ， ， ， ， ， ， 提交方式 提交方式 提交方式 提交方式 提交方式 提交方式 提交方式 ، ['出库单号' ، '出库类型' ، '总金额' ، '申请人 （单位 单位）' ، '备注'] ، colmodel: [{name: 'id' ، index: 'id' ، // 索引。其和后台交互的参数为 sidxkey: true ، // 当从服务器端返回的数据中没有 id 时 ， 将此作为唯一 将此作为唯一 使用只有一个列可以做这项设置。如果设置多于一个 使用只有一个列可以做这项设置。如果设置多于一个 使用只有一个列可以做这项设置。如果设置多于一个 ， 那么只选取第一个 那么只选取第一个 其他被忽略 width: 100 ، ediable: "30"}} ، {name: 'type' ، index: 'type' ، width: 200 ، // 宽度 reditable: true ، // 是否可编辑 edittype: "الدفع" ، العرض: 60 ، sorttype: "double" ، reditable: true} ، {name: 'name' ، index: 'name' ، width: 150 ، editable: true ، editoptions: {size: "20" ، maxLength: "30"}} ، {name: "text:" text: width: "textarea" ، editoptions: {الصفوف: "2" ، كولز: "10"}} ،] ، ViewRecords: true ، // 是否在浏览导航栏显示记录总数 rownum: 10 ، // 每页显示记录数 rollist: [10 ، 20 ، 30] ، // 用于改变显示行数的下拉列表框的元素数组。pager: pager_selector ، // 分页、按钮所在的浏览导航栏 altrows: // 设置为交替行表格 ، صحيح ، // 是否多选 // multikey: "ctrlkey" ، // 是否只能用 ctrl 按键多选 multiboxonly: true ، // 是否只能点击复选框多选 // subdrict: true ، // sortname: 'id' ، // 默认的排序列名 // sortorder: 'asc' ، // 默认的排序方式 （asc 升序 ， desc 降序 降序 降序）））） // 自动宽}) ؛ // 浏览导航栏添加功能部分代码 $ (grid_selector) .NavGrid (pager_selector ، {search: true ، // 检索 add: true ، الخيارات {} ، // إضافة خيارات {} ، // حذف الخيارات {multiplesearch: true} // خيارات البحث - تحديد البحث المتعدد) ؛}) ؛ </script> </body> </html>： ：
id 的 قابلة للتحرير 为 false 所以不能被编辑
下面是具体的检索选项
首先是 所有/任意 任意 و/أو
然后一般检索的包含选项有
本例中把 دفع 的 sorttype 设置成了 "double" 类型 （int 型也是一样 型也是一样 不过显示时会省略小数 ， 请注意） 所以 选项变为
检索是唯一能在不连接后台时使用成功的功能 其他功能都会提示设置 url
以上所述是 jqgrid 学习笔记整理 - 进阶篇 (一) 。下篇 jqgrid 学习笔记整理 - 进阶篇 (二) ， 正式进入后台设计阶段 主要以最基本的 主要以最基本的 mvc dao 包的设计模式 包的设计模式