jqGrid 学习笔记整理——进阶篇(一 )


Posted in Javascript onApril 17, 2016

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

<!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', //索引。其和后台交互的参数为sidx
key: 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.s
editoptions: {
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>

效果如下:

jqGrid 学习笔记整理——进阶篇(一 )

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

jqGrid 学习笔记整理——进阶篇(一 )

jqGrid 学习笔记整理——进阶篇(一 )

jqGrid 学习笔记整理——进阶篇(一 )

jqGrid 学习笔记整理——进阶篇(一 )

下面是具体的检索选项

首先是 所有/任意 对应逻辑为AND/OR

然后一般检索的包含选项有

jqGrid 学习笔记整理——进阶篇(一 )

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

jqGrid 学习笔记整理——进阶篇(一 )

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

以上所述是jqGrid 学习笔记整理——进阶篇(一 )。下篇jqGrid 学习笔记整理——进阶篇(二),正式进入后台设计阶段,主要以最基本的MVC DAO包的设计模式 面向初学。

Javascript 相关文章推荐
JavaScript去掉空格的方法集合
Dec 28 Javascript
JavaScript结合AJAX_stream实现流式显示
Jan 08 Javascript
js实现鼠标移到链接文字弹出一个提示层的方法
May 11 Javascript
详细解读AngularJS中的表单验证编程
Jun 19 Javascript
浅谈window对象的scrollBy()方法
Jul 15 Javascript
jQuery实现简单的点赞效果
May 29 Javascript
AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
Jan 25 Javascript
bootstrap daterangepicker汉化以及扩展功能
Jun 15 Javascript
jQuery 导航自动跟随滚动的实现代码
May 30 jQuery
JavaScript实现简单音乐播放器
Apr 17 Javascript
vue spa应用中的路由缓存问题与解决方案
May 31 Javascript
Vue-cli3.x + axios 跨域方案踩坑指北
Jul 04 Javascript
JS组件Bootstrap dropdown组件扩展hover事件
Apr 17 #Javascript
理解javascript对象继承
Apr 17 #Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
Apr 17 #Javascript
js如何准确获取当前页面url网址信息
Sep 13 #Javascript
基于javascript实现图片切换效果
Apr 17 #Javascript
非常棒的jQuery图片轮播效果
Apr 17 #Javascript
jQuery实现的倒计时效果实例小结
Apr 16 #Javascript
You might like
PHP开发不能违背的安全规则 过滤用户输入
2011/05/01 PHP
php实现约瑟夫问题的方法小结
2015/03/23 PHP
php操作MongoDB类实例
2015/06/17 PHP
推荐:极酷右键菜单
2006/11/29 Javascript
js控制div及网页相关属性的代码
2009/12/19 Javascript
IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素
2011/07/31 Javascript
jQuery的one()方法用法实例
2015/01/19 Javascript
JavaScript实现算术平方根算法-代码超简单
2015/09/11 Javascript
深入浅析JavaScript函数前面的加号和叹号
2016/07/09 Javascript
Javascript中的对象和原型(二)
2016/08/12 Javascript
针对JavaScript中this指向的简单理解
2016/08/26 Javascript
jquery请求servlet实现ajax异步请求的示例
2017/06/03 jQuery
Javacript中自定义的map.js  的方法
2017/11/26 Javascript
vue-cli脚手架-bulid下的配置文件
2018/03/27 Javascript
create-react-app修改为多页面支持的方法
2018/05/17 Javascript
从零到一详聊创建Vue工程及遇到的常见问题
2019/04/25 Javascript
js中的深浅拷贝问题简析
2019/05/10 Javascript
Vue实现input宽度随文字长度自适应操作
2020/07/29 Javascript
Vue props中Object和Array设置默认值操作
2020/07/30 Javascript
vue中如何自定义右键菜单详解
2020/12/08 Vue.js
在Python中使用itertools模块中的组合函数的教程
2015/04/13 Python
Python的Django框架中URLconf相关的一些技巧整理
2015/07/18 Python
用Python的Django框架来制作一个RSS阅读器
2015/07/22 Python
对python中的for循环和range内置函数详解
2018/04/17 Python
用Python逐行分析文件方法
2019/01/28 Python
Python 利用邮件系统完成远程控制电脑的实现(关机、重启等)
2019/11/19 Python
基于python图像处理API的使用示例
2020/04/03 Python
使用Python+Appuim 清理微信的方法
2021/01/26 Python
基于CSS3实现的黑色个性导航菜单效果
2015/09/14 HTML / CSS
猫途鹰:全球领先的旅游点评社区
2017/04/07 全球购物
mysql_pconnect()和mysql_connect()有什么区别
2012/05/25 面试题
HR喜欢的自荐信格式
2013/10/08 职场文书
特色冷饮店创业计划书
2014/01/28 职场文书
工程类专业自荐信范文
2014/03/09 职场文书
JavaScript实现班级抽签小程序
2021/05/19 Javascript
简单聊聊Vue中的计算属性和属性侦听
2021/10/05 Vue.js