在浏览导航栏添加所需按钮
<! docType html> <html> <head> <meta charset = "utf-8"/> <title> demo </title> <link rel = "stylesheet"type = "text/css"href = "css/jquery-ui.min.css"/> href = "css/jquery-ui.theme.min.css"/> <link rel = "스타일 시트"유형 = "text/css"href = "css/ui.jqgrid-bootstrap-ui.css"/> <링크 rel = "Stylesheet"type = "text/css"css/u.jgrid. /> </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"tept/javascrip 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 为 "로컬"时需填写 var grid_data = [{id : "00001", 유형 : "退货出库", 지불 : "1000", "abc", 텍스트 : "CCC"}, {id : " "1000", 이름 : "ABC", 텍스트 : "aaa"}, {id : "00003", 유형 : "退货出库", "退货出库", pay : "1040.06", 이름 : "abc", "ddd"}]; var grid_selector = "#grid-table"; var pager_selector = "#grid-pager"; $ (function). {$ ( "#grid-table"). jqgrid ({data : grid_data, // 当 datatype 为 "로컬"时需填写 데이터 유형 : "local", // 数据来源 数据来源 ay (local, json, jsonp, xml ∎ height : 150, // 高度 高度 表格高度。可为数值、百分比或 'auto'// mtype [ '出库单号', '出库类型 出库类型', '总金额 总金额', '申请人 申请人 (单位 申请人 ←)' ','备注 备注 '], colmodel : [{name :'id ', index :'id ', // 索引。其和后台交互的参数为 sidxkey : true, // 当从服务器端返回的数据中没有 id 时 时, 将此作为唯一 rowid 使用只有一个列可以做这项设置。如果设置多于一个, 那么只选取第一个 那么只选取第一个 那么只选取第一个, 其他被忽略 width : 100, editoptions : {size, maxl : "30"}}, {name : 'type', index : 'type', width : 200, // 宽度 편집 : true, // 是否可编辑 edittype : "select", // 可以编辑的类型。可选值 ： text, textarea, select, checkbox, password, image and file.seditoptions : {value : "1 : 采购入库; 2 : 退用入库"}, {pay ' 60, SortType : "double", editable : true}, {name : 'name', index : 'name', width : 150, editables : true, editoptions : {size : "20", maxlength : "30"}}, {이름 : 'text', 'text', width : 250, cinditable : true, edittorepe : "textarea" {행 : "2", cols : "10"}},], viewrecords : true, // 是否在浏览导航栏显示记录总数 rownum : 10, // 每页显示记录数 rowlist : [10, 20, 30], // 用于改变显示行数的下拉列表框的元素数组。pager : pager_selector, // 分页、按钮所在的浏览导航栏 altrows : true, // 设置为交替行表格, 默认为 false // toppager : // multiselect : true, // ^/rikey "ctrlkey", // 是否只能用 ctrl 按键多选 multiboxonly : true, // 是否只能点击复选框多选 是否只能点击复选框多选 // subgrid : true, // sortname : 'id', // 默认的排序列名 默认的排序列名 // sortorder : 'asc', // 默认的排序方式 − (asc 升序), desc} 캡션 : "采购退货单列表", // 表名 autowidth : true // 自动宽}); // 浏览导航栏添加功能部分代码 $ (grid_selector) .navgrid (pager_selector, {search : true, // 检索 add add : true, // 添加 ay, // 添加 添加 添加 添加 为 为 为 添加 (只有 只有 只有 只有 为 为 为 为 为 为 true} 편집 : // 修改 只有 只有 只有 只有 为 为 为 true) del : true, //}, //}, //} // 옵션 추가 {}, // 옵션 옵션 {multiplesearch : true} // 검색 옵션 - 다중 검색 정의);}); </script> </body> </html>效果如下 ：
id 为 편집 가능한 itable false 所以不能被编辑
下面是具体的检索选项
首先是 首先是/所有 对应逻辑为 对应逻辑为 및/또는
然后一般检索的包含选项有
pay ty SortType 设置成了“double”类型 类型 类型 类型 类型 类型 类型 类型 类型 (int 型也是一样 型也是一样, 不过显示时会省略小数, 请注意) 所以 选项变为 选项变为
检索是唯一能在不连接后台时使用成功的功能 检索是唯一能在不连接后台时使用成功的功能 URL
以上所述是 jqgrid q ― ― – – 进阶篇 进阶篇 (一 一) 。下篇 jqgrid 学习笔记整理 学习笔记整理 学习笔记整理 – – 进阶篇 进阶篇 (二 二), 正式进入后台设计阶段, 主要以最基本的 mvc dao 包的设计模式 面向初学。