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表格的使用的更多相关文章

  1. [译]MVC网站教程(四):MVC4网站中集成jqGrid表格插件(系列完结)

    目录 1.   介绍 2.   软件环境 3.   在运行示例代码之前(源代码 + 示例登陆帐号) 4.         jqGrid和AJAX 5.         GridSettings 6.  ...

  2. MongoDB学习笔记(三) 在MVC模式下通过Jqgrid表格操作MongoDB数据

    看到下图,是通过Jqgrid实现表格数据的基本增删查改的操作.表格数据增删改是一般企业应用系统开发的常见功能,不过不同的是这个表格数据来源是非关系型的数据库MongoDB.nosql虽然概念新颖,但是 ...

  3. CRUD功能的JqGrid表格

    CRUD功能的JqGrid表格 之前的项目也曾用过JgGrid对它的基本功能也是略有了解,网上有个国外的开源的项目,但是不适合个人的风格,所以花了3天空余的时间封装了下JqGrid,也算是参加开发工作 ...

  4. 在MVC模式下通过Jqgrid表格操作MongoDB数据

    看到下图,是通过Jqgrid实现表格数据的基本增删查改的操作.表格数据增删改是一般企业应用系统开发的常见功能,不过不同的是这个表格数据来源是非关系型的数据库MongoDB.nosql虽然概念新颖,但是 ...

  5. 五分钟搭建起一个包含CRUD功能的JqGrid表格

    之前的项目也曾用过JgGrid对它的基本功能也是略有了解,网上有个国外的开源的项目,但是不适合个人的风格,所以花了3天空余的时间封装了下JqGrid,也算是参加开发工作10个月以来写的第一个比较完整的 ...

  6. 点击jqGrid表格,弹出需要的表格的数据

    首先,我们先定义一个函数,然后在JQuery里面直接引用就可以了, function GetJqGridRowValue(jgrid, code) { var KeyValue = "&qu ...

  7. jqgrid表格列动态加载的实现

    选中几个测点名,在表格中就显示几列. 具体代码如下: function reloadGrid(postData){ $('#gridTable').jqGrid('GridUnload'); var ...

  8. 导出jqgrid表格数据为EXCEL文件,通过tableExport.js插件。

    今天公司项目需要做个导出功能,将jqgrid查询出的数据导出为EXCEL表格文件,期间遇到两个问题: 1.导出报错 uncaught exception: INVALID_CHARACTER_ERR: ...

  9. jqprint导入jqgrid表格时,内容溢出的原因以及解决方法

    jqprint在导入表格的时候,会将原表格的样式全部拉过来,所以说原表格(如jqgrid的表格)的内容在有滚动条的时候,必须得将宽度设置为100%(等百分比的宽度),不能设置成固定宽度,不然表格内容会 ...

  10. jqGrid表格控件

    一. jqGrid的加载. 1.引用相关头文件 引入CSS: <link type="text/css" rel="stylesheet" href=&q ...

随机推荐

  1. 配置apache

    1. 修改httpd.conf文件 # vi  /usr/local/apache/conf/httpd.conf 1) 设置根目录的路径 根目录是指Apache存放配置文件和日志文件的目录,配置参数 ...

  2. Spring Data JPA: 实现自定义Repository

    一.前言 由于项目中的 实体(entity)默认都是继承一个父类(包含一些公共的属性,比如创建时间,修改时间,是否删除,主键id).为了实现逻辑删除,一般会自己实现RepositoryFactoryB ...

  3. jquery考试纠错笔记.

    1. 获取元素范围大小顺序依次为: $(#one).siblings("div")>$("#one~div")>$("#one +div& ...

  4. 2017-02-19C#基础 - 数据类型与类型转换

    数据类型 基本数据类型 1)整形:byte  short  int  long 整数类型 2)浮点型:fioat(.NET类型 Single 值后面要加f float = 10.5f;)  doubl ...

  5. 用 node.js 创建第一个Hello World

    如果我们使用PHP来编写后端的代码时,需要Apache(xampp) 或者 Nginx 的HTTP 服务器,并配上 mod_php5 模块和php-cgi.从这个角度看,整个"接收 HTTP ...

  6. KoaHub平台基于Node.js开发的Koa的get/set session插件代码详情

    koa-session2 Middleware for Koa2 to get/set session use with custom stores such as Redis or mongodb ...

  7. 1131: [POI2008]Sta

    1131: [POI2008]Sta Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 783  Solved: 235[Submit][Status] ...

  8. 1050: [HAOI2006]旅行comf

    1050: [HAOI2006]旅行comf Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 1495  Solved: 737[Submit][Sta ...

  9. i++和++i 的学习

    在<<C++ Primer>> 第四版 5.5中讲解到: ++i:返回操作之后的结果,且是个左值. i++:返回操作之前的结果,且是有右值. // 2_3.cpp : 定义控制 ...

  10. c# 将匿名类或者集合转Json格式数据一些方法

    要说写这个功能呢也是因为工作需要,白天呢上班写个Web页面需要ajax请求后台并将数据以Json格式传会前端,由于公司特殊性吧,不能连外网(很苦比).所以只有等到晚上回家上网边查边写! public ...