在浏览导航栏添加所需按钮
<! doctype html> <html> <head> <meta charset = "utf-8"/> <title> การสาธิต </title> <link rel = "stylesheet" type = "text/css" href = "css/jQuery-ui.min.css"/> <link href = "css/jQuery-ui.theme.min.css"/> <link rel = "stylesheet" type = "text/css" href = "css/ui.jqgrid-bootstrap-ui.css"/> <link rel = "stylesheet /> </head> <body> <div id = "main"> <!-jqgrid 所在-> <table id = "grid-table"> </table> <!-jqgrid 浏览导航栏所在-> <div id = "grid-pager"> </div> </div> charset = "utf-8"> </script> <script src = "js/i18n/grid.locale-cn.js" type = "text/javascript" charset = "utf-8"> </script> type = "text/javascript"> // 当 datatype 为 "local" 时需填写 var grid_data = [{id: "00001", ประเภท: "退货出库", จ่าย: "1000", ชื่อ: "abc", ข้อความ: "ccc"}, {id: "00002" {id: "00003", ประเภท: "退货出库", จ่าย: "1040.06", ชื่อ: "abc", ข้อความ: "ddd"}]; var grid_selector = "#grid-table"; var pager_selector = "#grid-pager"; // 当ข้อมูล为 "local" 时需填写ข้อมูล: "local", // 数据来源, 本地数据( local, json, jsonp, xml 等) ความสูง: 150, // 高度, 表格高度。可为数值、百分比或 表格高度。可为数值、百分比或 表格高度。可为数值、百分比或 '总金额', '申请人(单位' '备注'], colmodel: [{ชื่อ: 'id', ดัชนี: 'id', // 索引。其和后台交互的参数为 sidxkey: จริง, // 当从服务器端返回的数据中没有 id 时, 将此作为唯一 rowid 使用只有一个列可以做这项设置。如果设置多于一个, 那么只选取第一个, 其他被忽略其他被忽略 width: 100, แก้ไข: '{type:' wid ' // 宽度แก้ไขได้: จริง, // 是否可编辑 editType: "เลือก", // 可以编辑的类型。可选值: ข้อความ, textarea, เลือก, ช่องทำเครื่องหมาย, รหัสผ่าน, ปุ่ม, รูปภาพ, ภาพและไฟล์. seditoptions: {value: "1: 采购入库; 2: 退用入库"}}, {ชื่อ: 'ชื่อ', ดัชนี: 'ชื่อ', ความกว้าง: 150, แก้ไขได้: จริง, editoptions: {ขนาด: "20", maxlength: "30"}}, {ชื่อ: 'ข้อความ', ดัชนี: 'ข้อความ', ความกว้าง: 250, เรียงลำดับ: เท็จ ], ViewRecords: true, // 是否在浏览导航栏显示记录总数 rownum: 10, // 每页显示记录数 rowlist: [10, 20, 30], // 用于改变显示行数的下拉列表框的元素数组。pager: pager_selector, // 分页、按钮所在的浏览导航栏 altrows: true, // 设置为交替行表格, 默认为 false // toppager: true, // 是否在上面显示浏览导航栏 multiselect true, // 是否只能点击复选框多选 // subgrid: true, // sortname: 'id', // 默认的排序列名 // sortorder: 'asc', // 默认的排序方式( asc 升序 desc 降序降序) คำบรรยาย: 采购退货单列表 ", // 表名 autowidth: true // 自动宽}); // 浏览导航栏添加功能部分代码 $ (grid_selector) // 添加 (只有 แก้ไขได้为 true 时才能显示属性))) edit: true, // 修改(只有 แก้ไขได้为 true 时才能显示属性)) del: true, // 删除รีเฟรช: true // 刷新}, {}, // ตัวเลือกแก้ไข {}, // เพิ่มตัวเลือก {}, // ลบตัวเลือก ค้นหา);}); </script> </body> </html>效果如下:
ID 的แก้ไขได้为เท็จ所以不能被编辑
下面是具体的检索选项
首先是/任意และ/หรือ
然后一般检索的包含选项有
จ่ายเงิน的 sorttype 设置成了“ double” 类型 int 型也是一样, 不过显示时会省略小数,, 请注意)))))))
检索是唯一能在不连接后台时使用成功的功能 URL
以上所述是 jqgrid 学习笔记整理 ― 进阶篇 (一) 。下篇 Jqgrid 学习笔记整理学习笔记整理进阶篇 (二), 正式进入后台设计阶段, 主要以最基本的 mvc dao 包的设计模式面向初学。面向初学。面向初学。面向初学。面向初学。