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

首页

web前端

js教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:05 PM

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

<!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,
jqGrid 学习笔记整理——进阶篇(一 )_jqueryable: false,
jqGrid 学习笔记整理——进阶篇(一 )_jqueryoptions: {
size: "20",
maxlength: "30"
}
}, {
name: 'type',
index: 'type',
width: 200, //宽度
jqGrid 学习笔记整理——进阶篇(一 )_jqueryable: true, //是否可编辑
jqGrid 学习笔记整理——进阶篇(一 )_jquerytype: "select", //可以编辑的类型。可选值：text, textarea, select, checkbox, password, button, image and file.s
jqGrid 学习笔记整理——进阶篇(一 )_jqueryoptions: {
value: "1:采购入库;2:退用入库"
}
}, {
name: 'pay',
index: 'pay',
width: 60,
sorttype: "double",
jqGrid 学习笔记整理——进阶篇(一 )_jqueryable: true
}, {
name: 'name',
index: 'name',
width: 150,
jqGrid 学习笔记整理——进阶篇(一 )_jqueryable: true,
jqGrid 学习笔记整理——进阶篇(一 )_jqueryoptions: {
size: "20",
maxlength: "30"
}
}, {
name: 'text',
index: 'text',
width: 250,
sortable: false,
jqGrid 学习笔记整理——进阶篇(一 )_jqueryable: true,
jqGrid 学习笔记整理——进阶篇(一 )_jquerytype: "textarea",
jqGrid 学习笔记整理——进阶篇(一 )_jqueryoptions: {
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, {
jqGrid 学习笔记整理——进阶篇(一 )_jquery: true, // 检索
jqGrid 学习笔记整理——进阶篇(一 )_jquery: true, //添加 （只有jqGrid 学习笔记整理——进阶篇(一 )_jqueryable为true时才能显示属性）
jqGrid 学习笔记整理——进阶篇(一 )_jquery: true, //修改（只有jqGrid 学习笔记整理——进阶篇(一 )_jqueryable为true时才能显示属性）
del: true, //删除
refresh: true //刷新
}, {}, // jqGrid 学习笔记整理——进阶篇(一 )_jquery options
{}, // jqGrid 学习笔记整理——进阶篇(一 )_jquery options
{}, // delete options
{
multipleSearch: true
} // jqGrid 学习笔记整理——进阶篇(一 )_jquery options - define multiple jqGrid 学习笔记整理——进阶篇(一 )_jquery
);
});
</script>
</body>
</html>

登录后复制

效果如下：

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

id的jqGrid 学习笔记整理——进阶篇(一 )_jqueryable为false 所以不能被编辑

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

del

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

下面是具体的检索选项

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

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

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

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

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

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

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

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7767

Java教程

1644

CakePHP 教程

1399

Laravel 教程

1293

PHP教程

1234

显示更多

Related knowledge

前端热敏纸小票打印遇到乱码问题怎么办？ Apr 04, 2025 pm 02:42 PM

前端热敏纸小票打印的常见问题与解决方案在前端开发中，小票打印是一个常见的需求。然而，很多开发者在实...

神秘的JavaScript：它的作用以及为什么重要 Apr 09, 2025 am 12:07 AM

JavaScript是现代Web开发的基石，它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发，极大地提升了用户体验和跨平台开发的灵活性。