在浏览导航栏添加所需按钮
<! Doctype html> <html> <head> <meta charset = "utf-8"/> <itement> demo </iteme> <tautan rel = "stylesheet" type = "text/css" href = "css/jquery-ui.min.css"/<link rel = "csse/jquery-ui.min.css"//<link rel = "styles/jquery-ui" href = "css/jQuery-ui.theme.min.css"/> <tautan rel = "stylesheet" type = "text/css" href = "css/ui.jqgrid-boottrap-ui.css"/> <link rel = "styles" type- "csss" csss "css. /> </head> <body> <Div id = "main"> <!-jqgrid 所在-> <table id = "grid-table"> </able> <!-jqgrid 浏览导航栏所在-> <div id = "grid-pager"> </div> </div> <script src = "js/jQuery-1.11.min.min. charset = "UTF-8"> </script> <skrip src = "js/i18n/grid.locale-cn.js" type = "text/javascript" charset = "utf-8"> </skrip <script src = "js/jQuery.jqgrid.min.js" type = "script =" js/jQuery.jqgrid.min.js "type =" script = "TECP/JSCRIK" type = "Text/JavaScript"> // 当 DataType 为 "Lokal" 时需填写 var grid_data = [{id: "00001", type: "退货出库", bayar: "1000", nama: "ABC", Teks: "CCC"}, {id: "00002", type: "退货出库 退货出库 退货出库 £: {id: "00003", ketik: "退货出库", bayar: "1040.06", nama: "ABC", teks: "ddd"}]; var grid_selector = "#grid-table"; var pager_selector = "#grid-pager"; $ (dokumen) .ready (function () {("#DATA ("#grid "(docume) .Ready (function () {("#("#("#("#("#("#("#("#$ ("#("#). // 当 DataType 为 "Lokal" 时需填写 DataType: "Local", // 数据来源 ， 本地数据（ Lokal ， JSON, JSONP, XML 等） Tinggi: 150, // 高度 ， 表格高度。可为数值、百分比或 表格高度。可为数值、百分比或 表格高度。可为数值、百分比或 {{{{{{{{{{{{{, '{', " 'id', index: 'id', // 索引。其和后台交互的参数为 sidxkey: true, // 当从服务器端返回的数据中没有 id 时 ， 将此作为唯一 将此作为唯一 rowid 使用只有一个列可以做这项设置。如果设置多于一个 ， 那么只选取第一个 ， 其他被忽略 其他被忽略 其他被忽略 其他被忽略 其他被忽略 其他被忽略 其他被忽略 其他被忽略 其他被忽略 其他被忽略 其他被忽略 其他被忽略 ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， {{{{{{{{{{{{{{{{{{{{是否可编辑 {{{{{{{{~ {{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{name: " "Pilih", // 可以编辑的类型。可选值 ： Teks, TextArea, Pilih, kotak centang, kata sandi, tombol, gambar dan file. Benar, EditOptions: {size: "20", maxlength: "30"}}, {name: 'text', index: 'text', width: 250, sortable: false, edited: true, edittype: "textarea", editOptions: {baris: "2", cols: "10"},], {{baris: "2", cols: "10"},], {{{baris: "2", cols: "10"},],},}, {rows: "2", cols: "10"},], {{{rows: "2", COLS: "10"}, "}," 10 " // 每页显示记录数 Rowlist: [10, 20, 30], // 用于改变显示行数的下拉列表框的元素数组。pager: pager_selector, // 分页、按钮所在的浏览导航栏 altrows: true, // 设置为交替行表格, 默认为 false // toppager: true, // 是否在上面显示浏览导航栏 multiselect: true, // 是否多选 // multikey: "ctrlkey", // 是否只能用 ctrl 按键多选 按键多选 按键多选 按键多选 是否多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选 按键多选// sortname: 'id', // 默认的排序列名 // sortorder: 'asc', // 默认的排序方式（ asc 升序 ， desc 降序） keterangan: "采购退货单列表", // 表名 autowidth: true // 自动宽}); // 浏览导航栏添加功能部分代码 浏览导航栏添加功能部分代码 检索 检索 检索 检索 检索 检索 检索 检索 检索 检索 检索 检索 检索 检索 检索 r) // 修改（只有 Diedit 为 true 时才能显示属性） del: true, // 删除 Refresh: true // 刷新}, {}, // Edit opsi {}, // Tambahkan opsi {}, // Hapus opsi {Multiplesearch: true} // Opsi pencarian - define Multiple Search);}); </script> </body> html>效果如下 ：
ID 的 dapat diedit 为 false 所以不能被编辑
下面是具体的检索选项
首先是 所有/任意 对应逻辑为 dan/atau
然后一般检索的包含选项有
本例中把 bayar 的 sorttype 设置成了 "ganda" 类型 （int 型也是一样 ， 不过显示时会省略小数 ， 请注意）所以 选项变为
检索是唯一能在不连接后台时使用成功的功能 其他功能都会提示设置 url
以上所述是 JQGrid 学习笔记整理 ―― 进阶篇 (一) 。下篇 JQGrid 学习笔记整理 ―― 进阶篇 (二) ， 正式进入后台设计阶段 ， 主要以最基本的 mvc dao 包的设计模式 面向初学。