JQgrid表格的使用
html部分:
<div class="tab">
<table id="datatable"></table>
<div id="pager2"></div>
</div>
js部分:
$(document).ready(function(){
var tableWidth = $("#datatable").parent().innerWidth();
$("#datatable").jqGrid({
url:'${basePath}/boxController/list',
datatype: "json",
mtype: "POST",
width: tableWidth,
height: 350,
autowidth:true,
editable: true,
shrinkToFit:true,
colNames:['','柜号','箱编号','','箱类型','箱门名称','一箱多卡','固定箱门','物品状态','开关状态','箱门状态','操作'],
colModel:[
{name:"terminalid",index:"terminalid",align:'center',width:90,sortable:false,hidden:true},
{name:"displayname",index:"displayname",align:'center',width:90,sortable:false},
{name:"boxid",index:'boxid',align:'left',width:100,sortable:false},
{name:"boxtypecode",index:"boxtypecode",align:'center',width:50,sortable:false,hidden:true},
{name:"boxtypename",index:"boxtypename",align:'center',width:50,sortable:false,hidden:false},
{name:"dispalyname",index:"dispalyname",frozen:true,align:'left',width:90,sortable:false},
{name:"oneboxmorecard",index:"oneboxmorecard",align:'center',width:90,sortable:false,formatter:function(el,options,rowData){
if(el==1){return '是';}else{return '否';}
}},
{name:"fixedbox",index:'fixedbox',align:'center',width:80,sortable:false,formatter:function(el,options,rowData){
if(el==0){return '不限制';}else if(el==1){return '一箱一卡';}else{return '其他限制';}
}},
{name:"article",index:'article',align:'center',width:70,sortable:false,formatter:function(el,options,rowData){
if(el==0){return "正常";}else if(el==1){return "锁定";}else{return "故障";}
}},
{name:"open",index:'open',align:'center',width:100,sortable:false,formatter:function(el,options,rowData){
if(el==0){return "开启";}else if(el==1){return "关闭";}else{return "故障";}
}},
{name:"status",index:"status",align:'center',width:90,sortable:false,formatter:function(el,options,rowData){
if(el==0){return "正常";}else if(el==1){return "锁定";}else{return "故障";}
}},
{name:"",index:'',align:'center',width:70,formatter:function(el,options,rowData){
var d= '<input type="button" value="删除" onclick="delRepository(\''+rowData.terminalid+'\',\''+rowData.boxid+'\')" style="width:30px;float:right;margin-right:5px;"/>';
var u= '<input type="button" value="修改" onclick="addMakeCard(\'修改类型\',\'修改\','+ options.rowId +')" style="width:30px;float:right;margin-right:10px;"/>';
return u+d;
}}
],
sortable: false,
rowNum:10,
rownumbers:false,
multiselect: true,
jsonReader: {
repeatitems : false,
id:"0"
},
pager: '#pager2',
rowList:[10,15,20],
toppager:true,
sortname: 'rechargenumber',
sortorder: 'desc',
viewrecords: true,
ondblClickRow:function(rowid){
RowData= jQuery(this).jqGrid("getRowData", rowid);
if(RowData.terminalid){
list('查看',RowData.terminalid); //双击查看方法
}
},
});
$("#datatable").jqGrid("navGrid", "#pager2", {
cloneToTop:true,// 克隆页面底层按钮到表顶端
search:false,//隐藏查询按钮
edit:false,//隐藏编辑按钮
searchfunc:openDialog4Searching,
searchtext:"查询",
addfunc : openDialog4Adding, // (1) 点击添加按钮,则调用openDialog4Adding方法
addtext:"新增",
editfunc : openDialog4Updating, // (2) 点击添加按钮,则调用openDialog4Updating方法
edittext:"修改",
delfunc : openDialog4Deleting, // (3) 点击添加按钮,则调用openDialog4Deleting方法
deltext:"删除",
alerttext : "请选择需要操作的数据行!" // (4) 当未选中任何行而点击编辑、删除、查看按钮时,弹出的提示信息
});
});
var openDialog4Adding = function(title,okValue,row) {};
var openDialog4Updating= function(title,okValue,row) {}
var openDialog4Deleting= function(title,okValue,row) {
var col=$("#datatable").jqGrid('getRowData',row);//获取单行数据
var ids = $("#datatable").jqGrid("getGridParam", "selarrrow");//获取多行数据
}
var openDialog4Searching = function(title,okValue,row) {}
JQgrid表格的使用的更多相关文章
- [译]MVC网站教程(四):MVC4网站中集成jqGrid表格插件(系列完结)
目录 1. 介绍 2. 软件环境 3. 在运行示例代码之前(源代码 + 示例登陆帐号) 4. jqGrid和AJAX 5. GridSettings 6. ...
- MongoDB学习笔记(三) 在MVC模式下通过Jqgrid表格操作MongoDB数据
看到下图,是通过Jqgrid实现表格数据的基本增删查改的操作.表格数据增删改是一般企业应用系统开发的常见功能,不过不同的是这个表格数据来源是非关系型的数据库MongoDB.nosql虽然概念新颖,但是 ...
- CRUD功能的JqGrid表格
CRUD功能的JqGrid表格 之前的项目也曾用过JgGrid对它的基本功能也是略有了解,网上有个国外的开源的项目,但是不适合个人的风格,所以花了3天空余的时间封装了下JqGrid,也算是参加开发工作 ...
- 在MVC模式下通过Jqgrid表格操作MongoDB数据
看到下图,是通过Jqgrid实现表格数据的基本增删查改的操作.表格数据增删改是一般企业应用系统开发的常见功能,不过不同的是这个表格数据来源是非关系型的数据库MongoDB.nosql虽然概念新颖,但是 ...
- 五分钟搭建起一个包含CRUD功能的JqGrid表格
之前的项目也曾用过JgGrid对它的基本功能也是略有了解,网上有个国外的开源的项目,但是不适合个人的风格,所以花了3天空余的时间封装了下JqGrid,也算是参加开发工作10个月以来写的第一个比较完整的 ...
- 点击jqGrid表格,弹出需要的表格的数据
首先,我们先定义一个函数,然后在JQuery里面直接引用就可以了, function GetJqGridRowValue(jgrid, code) { var KeyValue = "&qu ...
- jqgrid表格列动态加载的实现
选中几个测点名,在表格中就显示几列. 具体代码如下: function reloadGrid(postData){ $('#gridTable').jqGrid('GridUnload'); var ...
- 导出jqgrid表格数据为EXCEL文件,通过tableExport.js插件。
今天公司项目需要做个导出功能,将jqgrid查询出的数据导出为EXCEL表格文件,期间遇到两个问题: 1.导出报错 uncaught exception: INVALID_CHARACTER_ERR: ...
- jqprint导入jqgrid表格时,内容溢出的原因以及解决方法
jqprint在导入表格的时候,会将原表格的样式全部拉过来,所以说原表格(如jqgrid的表格)的内容在有滚动条的时候,必须得将宽度设置为100%(等百分比的宽度),不能设置成固定宽度,不然表格内容会 ...
- jqGrid表格控件
一. jqGrid的加载. 1.引用相关头文件 引入CSS: <link type="text/css" rel="stylesheet" href=&q ...
随机推荐
- SQLHELPER 帮助类
using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threa ...
- Android 反射-换一种方式编程
Android 反射-换一种方式编程 转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/59109933 本文出自[赵彦军的博客] 上一 ...
- java.lang.ClassNotFoundException: org.apache.commons.logging.Log
严重: A child container failed during startjava.util.concurrent.ExecutionException: org.apache.catalin ...
- Cloud9vue&vux上传github小步骤
成功后创建出以下文件,再输入: git init 再输入:$ git remote add origin https://github.com/github用户名/vux1 然后:git add. 按 ...
- 强化学习读书笔记 - 06~07 - 时序差分学习(Temporal-Difference Learning)
强化学习读书笔记 - 06~07 - 时序差分学习(Temporal-Difference Learning) 学习笔记: Reinforcement Learning: An Introductio ...
- Java基础——第一个记事本代码与Java注释
一 .使用记事本编辑java文件: 1.打开记事本,重命名文件名,文件拓展名“.java”.(必须要的,系统才能识别java文件) 2.编写一个简单的java代码: public class Hell ...
- 69个微信小程序常见问题
本文转自 遇到小程序方面的问题,该去哪里提问呢? 若是能得到微信官方的解答,想必是最叫人安心的.而微信也确实提供了这么一个地方. 在微信公众平台的开发者社区,就置顶了一个「小程序常见问题 FAQ」帖. ...
- wemall doraemon中Android app商城系统向指定URL发送GET方法的请求代码
URL的openConnection()方法将返回一个URLConnection对象,该对象表示应用程序和 URL 之间的通信链接.程序可以通过URLConnection实例向该URL发送请求.读取U ...
- 1491: [NOI2007]社交网络
1491: [NOI2007]社交网络 Time Limit: 10 Sec Memory Limit: 64 MBSubmit: 881 Solved: 518[Submit][Status] ...
- casperjs环境安装
1.python 环境安装 2.PhantomJs安装,戳这里,安装的1.9.8版本的,配置环境变量path:";C:\phantomjs"(注意:安装2.0.0版本,运行casp ...