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 相关文章推荐
JS BASE64编码 window.atob(), window.btoa()
Mar 09 Javascript
jquery中交替点击事件toggle方法的使用示例
Dec 08 Javascript
jQuery取消ajax请求的方法
Jun 09 Javascript
WEB前端实现裁剪上传图片功能
Oct 17 Javascript
工作中常用的js、jquery自定义扩展函数代码片段汇总
Dec 22 Javascript
js获取地址栏参数的两种方法
Jun 27 Javascript
Vue.js中组件中的slot实例详解
Jul 17 Javascript
vue项目中添加单元测试的方法
Jul 21 Javascript
详解如何构建一个Angular6的第三方npm包
Sep 07 Javascript
详解Vue.js使用Swiper.js在iOS
Sep 10 Javascript
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
Nov 12 Javascript
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 jQuery
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常用开发函数解析之数组篇[未完结]
2012/07/30 PHP
深入理解require与require_once与include以及include_once的区别
2013/06/05 PHP
PHP把数字转成人民币大写的函数分享
2014/06/30 PHP
php数组添加与删除单元的常用函数实例分析
2015/02/16 PHP
解决tp5在nginx下修改配置访问的问题
2019/10/16 PHP
js验证表单大全
2006/11/25 Javascript
js 日期转换成中文格式的函数
2009/07/07 Javascript
jMessageBox 基于jQuery的窗口插件
2009/12/09 Javascript
JavaScript 联动的无限级封装类,数据采用非Ajax方式,随意添加联动
2010/06/29 Javascript
jquery星级插件、支持页面中多次使用
2012/03/25 Javascript
JavaScript中instanceof与typeof运算符的用法及区别详细解析
2013/11/19 Javascript
js完美的div拖拽实例代码
2014/01/22 Javascript
jQuery表单域选择器用法分析
2015/02/10 Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
2016/08/29 Javascript
AngularJS $injector 依赖注入详解
2016/09/14 Javascript
JavaScript获取服务器时间的方法详解
2016/12/11 Javascript
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
2017/01/17 Javascript
详解vue渲染函数render的使用
2017/12/12 Javascript
nodejs更改项目端口号的方法
2018/05/13 NodeJs
纯JS实现出生日期[年月日]下拉菜单效果
2018/06/01 Javascript
JS实现移动端触屏拖拽功能
2018/07/31 Javascript
vue项目搭建以及全家桶的使用详细教程(小结)
2018/12/19 Javascript
JavaScript键盘事件常见用法实例分析
2019/01/03 Javascript
解决vue-cli 打包后自定义动画未执行的问题
2019/11/12 Javascript
Python字符串中查找子串小技巧
2015/04/10 Python
python获取命令行输入参数列表的实例代码
2018/06/23 Python
通过python实现随机交换礼物程序详解
2019/07/10 Python
Tensorflow实现神经网络拟合线性回归
2019/07/19 Python
django 模版关闭转义方式
2020/05/14 Python
keras topN显示,自编写代码案例
2020/07/03 Python
HTML5里的placeholder属性使用实例和美化显示效果的方法
2014/04/23 HTML / CSS
使用HTML5的Canvas绘制曲线的简单方法
2015/09/08 HTML / CSS
Edwaybuy西班牙:小米在线商店
2019/12/04 全球购物
高中学生干部学习的自我评价
2014/02/21 职场文书
2015年幼儿园中班开学寄语
2015/05/27 职场文书
Python中常见的导入方式总结
2021/05/06 Python