jqGrid 学习笔记整理——进阶篇（一）

本篇为基础篇的扩展，使其具有增、删、改、查的基本功能。

在浏览导航栏添加所需按钮

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>DEMO</title><link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css" /><link rel="stylesheet" type="text/css" 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 class="main" id="main"><!--jqGrid所在--><table id="grid-table"></table><!--jqGrid 浏览导航栏所在--><div id="grid-pager"></div></div><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",name: "abc",text: "ddd"}];var grid_selector = "#grid-table";var pager_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',index: 'id', //索引。其和后台交互的参数为sidxkey: true, //当从服务器端返回的数据中没有id时，将此作为唯一rowid使用只有一个列可以做这项设置。如果设置多于一个，那么只选取第一个，其他被忽略width: 100,editable: false,editoptions: {size: "20",maxlength: "30"}}, {name: 'type',index: 'type',width: 200, //宽度editable: true, //是否可编辑edittype: "select", //可以编辑的类型。可选值：text, textarea, select, checkbox, password, button, image and file.seditoptions: {value: "1:采购入库;2:退用入库"}}, {name: 'pay',index: 'pay',width: 60,sorttype: "double",editable: true}, {name: 'name',index: 'name',width: 150,editable: true,editoptions: {size: "20",maxlength: "30"}}, {name: 'text',index: 'text',width: 250,sortable: false,editable: true,edittype: "textarea",editoptions: {rows: "2",cols: "10"}}, ],viewrecords: true, //是否在浏览导航栏显示记录总数rowNum: 10, //每页显示记录数rowList: [10, 20, 30], //用于改变显示行数的下拉列表框的元素数组。pager: pager_selector, //分页、按钮所在的浏览导航栏altRows: true, //设置为交替行表格,默认为false//toppager: true,//是否在上面显示浏览导航栏multiselect: true, //是否多选//multikey: "ctrlKey",//是否只能用Ctrl按键多选multiboxonly: true, //是否只能点击复选框多选// subGrid : true, //sortname:'id',//默认的排序列名//sortorder:'asc',//默认的排序方式（asc升序，desc降序）caption: "采购退货单列表", //表名autowidth: true //自动宽});//浏览导航栏添加功能部分代码$(grid_selector).navGrid(pager_selector, {search: true, // 检索add: true, //添加  （只有editable为true时才能显示属性）edit: true, //修改（只有editable为true时才能显示属性）del: true, //删除refresh: true //刷新}, {}, // edit options{}, // add options{}, // delete options{multipleSearch: true} // search options - define multiple search);});</script></body></html>

效果如下：

id的editable为false 所以不能被编辑

下面是具体的检索选项
首先是所有/任意对应逻辑为AND/OR
然后一般检索的包含选项有

本例中把pay的sorttype设置成了 “double”类型（int型也是一样，不过显示时会省略小数，请注意）所以选项变为

检索是唯一能在不连接后台时使用成功的功能 其他功能都会提示设置url

下篇正式进入后台设计阶段，主要以最基本的MVC DAO包的设计模式面向初学

jqGrid 学习笔记整理——进阶篇（一）相关推荐

jqGrid 学习笔记整理——基础篇
jqGrid 学习笔记整理--基础篇 jqGrid 实例中文版网址:http://blog.mn886.net/jqGrid/ 国外官网:http://www.trirand.com/blog/ 本人 ...
NUnit学习笔记之进阶篇
一.概述 NUnit是一款优秀的开源回归测试框架,我在<NUnit学习笔记>一文中已对其基本使用方法进行了简单的介绍.但除了TestFixture.Test.SetUp.TearDown. ...
golang学习笔记（进阶篇）
四.Golang进阶部分(并发) 并发编程在当前软件领域是一个非常重要的概念,随着CPU等硬件的发展,我们无一例外的想让我们的程序运行的快一点.再快一点.Go语言在语言层面天生支持并发,充分利用现代C ...
Docker学习笔记(二)--进阶篇
文章目录 1. Docker复杂安装 1.1 安装Mysql的主从复制主从搭建步骤 1.2 安装Redis集群 1.2.1 面试题:1~2亿条数据需要缓存,请问应该怎样设计 1.2.2 三主三从集群 ...
Kafka入门篇学习笔记整理
Kafka入门篇学习笔记整理 Kafka是什么 Kafka的特性应用场景 Kafka的安装单机版部署集群部署环境准备 Kafka 2.x集群部署 Kafka 3.x集群部署监听器和内外网络 K ...
这是一篇Markdown的学习笔记整理
这是一篇Markdown的学习笔记整理参考博客: https://blog.csdn.net/u014061630/article/details/81359144 写得比我详细好多_(:з」∠)_ ...
专题：机器学习进阶之路——学习笔记整理
现将自己机器学习方面的学习笔记整理如下,后续还会继续更新: 机器学习基本概念监督学习.非监督学习.批量学习.在线学习.基于实例学习.基于模型学习经验风险最小化与结构风险最小化模型评估与选择(留出 ...
Deep Learning（深度学习）学习笔记整理系列三
Deep Learning(深度学习)学习笔记整理系列声明: 1)该Deep Learning的学习系列是整理自网上很大牛和机器学习专家所无私奉献的资料的.具体引用的资料请看参考文献.具体的版本声明 ...
Deep Learning（深度学习）学习笔记整理(二）
本文整理了网上几位大牛的博客,详细地讲解了CNN的基础结构与核心思想,欢迎交流 [1]Deep learning简介 [2]Deep Learning训练过程 [3]Deep Learning模型之: ...

jqGrid 学习笔记整理——进阶篇（一）

jqGrid 学习笔记整理——进阶篇（一）

在浏览导航栏添加所需按钮

jqGrid 学习笔记整理——进阶篇（一）相关推荐

最新文章

热门文章

jqGrid 学习笔记整理——进阶篇（一 ）

jqGrid 学习笔记整理——进阶篇（一 ）

在浏览导航栏添加所需按钮

jqGrid 学习笔记整理——进阶篇（一 ）相关推荐

最新文章

热门文章

jqGrid 学习笔记整理——进阶篇（一）

jqGrid 学习笔记整理——进阶篇（一）

jqGrid 学习笔记整理——进阶篇（一）相关推荐