jqGrid整理笔记

<!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>

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

        url:contextPath + "search.action",

        datatype:"json", //数据来源，本地数据

        mtype:"POST",//提交方式

        height:420,//高度，表格高度。可为数值、百分比或'auto'

        //width:1000,//这个宽度不能为百分比

        autowidth:true,//自动宽

        colNames:['添加日期', '手机号码', '银行卡号','备注','操作'],

        colModel:[

            //{name:'id',index:'id', width:'10%', align:'center' },

            {name:'createDate',index:'createDate', width:'20%',align:'center'},

            {name:'phoneNo',index:'phoneNo', width:'15%',align:'center'},

            {name:'cardNo',index:'cardNo', width:'20%', align:"center"},

            {name:'remark',index:'remark', width:'35%', align:"left", sortable:false},

            {name:'del',index:'del', width:'10%',align:"center", sortable:false}

        ],

        rownumbers:true,//添加左侧行号

        //altRows:true,//设置为交替行表格,默认为false

        //sortname:'createDate',

        //sortorder:'asc',

        viewrecords: true,//是否在浏览导航栏显示记录总数

        rowNum:15,//每页显示记录数

        rowList:[15,20,25],//用于改变显示行数的下拉列表框的元素数组。

        jsonReader:{

            id: "blackId",//设置返回参数中，表格ID的名字为blackId

            repeatitems : false

        },
　　　　 loadComplete : function(){//加载完成后的回调函数
　　　　 var table = this;
　　　　 setTimeout(function(){
　　　　 updatePagerIcons(table);
　　　},0);
　　 },
　　 ondblClickRow: function (rowid, status) {
　　　　searchParticulars();
　　 }
　　pager:$('#gridPager')
});

/*修改分页按钮样式*/

function updatePagerIcons(table) {
var replacement =
{
'ui-icon-seek-first' : 'ace-icon fa fa-angle-double-left bigger-140',
'ui-icon-seek-prev' : 'ace-icon fa fa-angle-left bigger-140',
'ui-icon-seek-next' : 'ace-icon fa fa-angle-right bigger-140',
'ui-icon-seek-end' : 'ace-icon fa fa-angle-double-right bigger-140'
};
$('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function(){
var icon = $(this);
var $class = $.trim(icon.attr('class').replace('ui-icon', ''));

if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
})
}

jqGrid整理笔记的更多相关文章

canvas学习之API整理笔记（二）
前面我整理过一篇文章canvas学习之API整理笔记(一),从这篇文章我们已经可以基本了解到常用绘图的API.简单的变换和动画.而本篇文章的主要内容包括高级动画.像素操作.性能优化等知识点,讲解每个知 ...
xmpp整理笔记：发送图片信息和声音信息
图片和音频文件发送的基本思路就是: 先将图片转化成二进制文件,然后将二进制文件进行base64编码,编码后成字符串.在即将发送的message内添加一个子节点,节点的stringValue(节点的值) ...
xmpp整理笔记：聊天信息的发送与显示
任何一个信息的发送都需要关注两个部分,信息的发出,和信息在界面中的显示往期回顾: xmpp整理笔记:环境的快速配置(附安装包) http://www.cnblogs.com/dsxniubilit ...
xmpp整理笔记：用户网络连接及好友的管理
xmpp中的用户连接模块包括用户的上线与下线信息展现,用户登录,用户的注册: 好友模块包括好友的添加,好友的删除,好友列表的展示. 在xmpp中负责数据传输的类是xmppStream,开发的过程中, ...
xmpp整理笔记：xmppFramework框架的导入和介绍
一个将要开发xmpp的项目,建议在项目刚创建就导入框架,这样可以避免一些自己操作失误造成不必要的损失. xmpp中最常用的框架就是 xmppFrameWork 往期回顾: xmpp整理笔记:环境的快速 ...
jQuery整理笔记文件夹
jQuery整理笔记文件夹 jQuery整理笔记一----jQuery開始 jQuery整理笔记二----jQuery选择器整理 jQuery整理笔记三----jQuery过滤函数 jQuery整理笔 ...
sk_buff整理笔记（两、操作函数）
承接上一:sk_buff 整理笔记(一.数据结构)这一篇要讲的是内核为sk_buff结构提供的一些操作函数. 第一.首先要讲的是sk_buff中的四大指针: 四大指针各自是:head.data.tai ...
jQgrid学习笔记
jQgrid学习笔记
element-ui 组件源码分析整理笔记目录
element-ui button组件 radio组件源码分析整理笔记(一) element-ui switch组件源码分析整理笔记(二) element-ui inputNumber.Card .B ...

随机推荐

DockerScan：Docker安全分析&测试工具
DockerScan:Docker安全分析&测试工具今天给大家介绍的是一款名叫DockerScan的工具,我们可以用它来对Docker进行安全分析或者安全测试. 项目主页 http://gi ...
CDN和浏览器缓存
1,CDN 旨在解决的最重要的问题是什么,我们称之为网络延迟,通过网络获取资源总是比从本地获取慢,无论服务器是在同一个局域网中还是位于世界的另一个角落,都是如此.这里的速度差异是 IT 行业的一个核心 ...
android app 闪屏
main activity package com.splash.screen; import android.app.Activity; import android.content.Intent; ...
【转载】#pragma once与#ifndef
本篇随笔为转载,原贴地址:#pragma once与#ifndef解析为了避免同一个文件被include多次,C/C++中有两种方式,一种是#ifndef方式,一种是#pragma once方式.在 ...
java8学习之收集器枚举特性深度解析与并行流原理
首先先来找出上一次[http://www.cnblogs.com/webor2006/p/8353314.html]在最后举的那个并行流报错的问题,如下: 在来查找出上面异常的原因之前,当然得要一点点 ...
Luogu P4171 [JSOI2010]满汉全席 2-sat
终于搞懂了$2-sat$.实际上是个挺简单的东西,像网络流一样关键在于建模. 问题:$n$个数$A$,可以选择$0$和$1$,现在给你$m$组条件$A$,$B$,对每个 ...
Django-csrf中间件
一.详解csrf原理 csrf要求发送post,put,或者delete请求的时候,是先以get方式发送请求,服务端响应时会分配一个随机字符串给客户端,客户端第二次发送post,put或delete请 ...
科普TPF知识
https://tieba.baidu.com/p/4926092734?see_lz=1&pn=1 707680700 https://tieba.baidu.com/p/492609273 ...
windows下安装geopandas
在linux下没任何问题,直接 pipenv install geopandas, 各种依赖库该编译的编译,该依赖的依赖. win下pyproj4编译不过,而且gdal库什么的也都是问题,建议全部从h ...
HGOI20190813 省常中互测6
Problem A 蛋糕将$n \times m $大小的蛋糕切成每块为$1 \times 1$大小的$n\times m$块. 交换任意两块蛋糕的切割顺序的方案算作一种. 对于$100 \%$的数 ...

jqGrid整理笔记

jqGrid整理笔记的更多相关文章

随机推荐

热门专题