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 相关文章推荐
用于自动添加Digg This!按钮的JavaScript
Dec 23 Javascript
js下用层来实现select的title提示属性
Feb 23 Javascript
js 复制或插入Html的实现方法小结
May 19 Javascript
jquery聚焦文本框与扩展文本框聚焦方法
Oct 12 Javascript
javascript实现点击按钮让DIV层弹性移动的方法
Feb 24 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
Jun 01 Javascript
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 jQuery
详解vue.js的事件处理器v-on:click
Jun 27 Javascript
详解javascript常用工具类的封装
Jan 30 Javascript
vue iview实现动态新增和删除
Jun 17 Javascript
Element中Slider滑块的具体使用
Jul 29 Javascript
vue在图片上传的时候压缩图片
Nov 18 Vue.js
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
解决phpmyadmin中文乱码问题。。。
2007/01/18 PHP
php 判断服务器操作系统的类型
2014/02/17 PHP
Zend Framework教程之动作的基类Zend_Controller_Action详解
2016/03/07 PHP
Laravel框架模板继承操作示例
2018/06/11 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
Locate a File Using a File Open Dialog Box
2007/06/18 Javascript
javascript(jquery)利用函数修改全局变量的代码
2009/11/02 Javascript
javascript 随机展示头像实现代码
2011/12/06 Javascript
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
2012/08/09 Javascript
JS对img进行操作(换图片/切图/轮换/停止)
2013/04/17 Javascript
Web Inspector:关于在 Sublime Text 中调试Js的介绍
2013/04/18 Javascript
Jquery 模板数据绑定插件的使用方法详解
2013/07/08 Javascript
javascript scrollTop正解使用方法
2013/11/14 Javascript
Js可拖拽放大的层拖动特效实现方法
2015/02/25 Javascript
Javascript简写条件语句(推荐)
2016/06/12 Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
2017/07/22 jQuery
JS监控关闭浏览器操作的实例详解
2017/09/12 Javascript
Vue.js 踩坑记之双向绑定
2018/05/03 Javascript
React全家桶环境搭建过程详解
2018/05/18 Javascript
vue实现路由切换改变title功能
2019/05/28 Javascript
Vue绑定用户接口实现代码示例
2020/11/04 Javascript
布同 统计英文单词的个数的python代码
2011/03/13 Python
Python random模块用法解析及简单示例
2017/12/18 Python
Python中shapefile转换geojson的示例
2019/01/03 Python
十行代码使用Python写一个USB病毒
2019/06/21 Python
PyTorch中常用的激活函数的方法示例
2019/08/20 Python
Python3创建Django项目的几种方法(3种)
2020/06/03 Python
浅谈CSS3鼠标移入图片动态提示效果(transform)
2017/11/06 HTML / CSS
PREMIUM-MALL法国:行李、箱包及配件在线
2019/05/30 全球购物
一套带网友答案的.NET笔试题
2016/12/06 面试题
文明礼仪事迹材料
2014/01/09 职场文书
女性健康讲座主持词
2015/07/04 职场文书
公司管理建议书
2015/09/14 职场文书
幼儿园六一儿童节开幕词
2016/03/04 职场文书
利用python调用摄像头的实例分析
2021/06/07 Python
实例详解Python的进程,线程和协程
2022/03/13 Python