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

随机推荐

31、NTP时间服务器
1.NTP简介 NTP服务器顾名思义就是时间同步服务器(Network Time Protocol),Linux下的ntp服务器配置相对来说都比较容易,但在Linux下有一个弊端,不同时区或者说是时间 ...
02：Java基础语法（一）
Java基础语法 Java的关键字及保留字关键字(Keyword) 关键字的定义和特点定义:被Java语言赋予了特殊含义的单词特点:关键字中所有字母都为小写注意事项:1)true.false.nul ...
Summer training round2 #9(Training28)
A:签到题 C:模拟搜索题 #include <bits/stdc++.h> #include <cstring> #include <iostream> #inc ...
CLI
命令行界面(英语:command-line interface,缩写:CLI)是在图形用户界面得到普及之前使用最为广泛的用户界面,它通常不支持鼠标,用户通过键盘输入指令,计算机接收到指令后,予以执行. ...
【CF1187E】Tree Painting
题目大意:给定一棵 N 个点的树,初始全是白点.要求你做 N 步操作,每一次选定一个与一个黑点相隔一条边的白点,将它染成黑点,然后获得该白点被染色前所在的白色联通块大小的权值.第一次操作可以任意选点, ...
Redis 管道pipeline
Redis是一个cs模式的tcp server,使用和http类似的请求响应协议. 一个client可以通过一个socket连接发起多个请求命令. 每个请求命令发出后client通常会阻塞并等待red ...
grunt-contrib-concat 合并任意文件
grunt-contrib-concat可用于合并任意文件(css\js\txt等) 安装插件:npm install grunt-contrib-concat --save-dev 参数: sepa ...
测试网站接口，nginx篇
nginx是反向代理,怎么通过nginx反向代理要测试接口的线上网站呢. 这里自我提供了一个方法,仅供参考!建议不要用于刷接口等非常规的用途,后果会很严重. 首先用node express创建一个项 ...
windows和linux开机自启动设置
Windows 1,启动快捷方式开始>程序>启动文件夹中拷贝进去需要开机启动的程序快捷方法,此方法需要相应用户登录系统2,注册为服务,设置启动方式为自动 a, sc命令 ...
max函数结合lambda使用
说明:d.keys() 以及列表可以看做lambda函数的实参,max的判断对象是key的值.最终返回的是使得key的值最大的那个实参.

jqGrid整理笔记

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

随机推荐

热门专题