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

随机推荐

8、linux权限-特殊权限
特殊权限: 1.setuid setuid: 让普通用户能够临时的拥有命令的属主权限,完成一些特殊的操作. suid的授权: chmod u+s chmod u-s chmod 4755 4代表是特殊 ...
BLE 5协议栈-物理层
文章转载自:http://www.sunyouqun.com/2017/04/page/4/ 1. 简介物理层(Physical Layer)是BLE协议栈最底层,它规定了BLE通信的基础射频参数, ...
PAT Basic 1040 有几个PAT (25 分)
字符串 APPAPT 中包含了两个单词 PAT,其中第一个 PAT 是第 2 位(P),第 4 位(A),第 6 位(T):第二个 PAT 是第 3 位(P),第 4 位(A),第 6 位(T). 现 ...
小程序UI设计（5）-符合视觉规范-按钮视觉规范
在设计工具中,根据规范我们定义了大中小三种按钮的尺寸大:720rpx *94rpx 圆角10px 字体18中:360rpx*70rpx 圆角8px 字体16 文字距离两边最小60小:120rpx*60 ...
标准C语言(3)
操作符用来描述对数字的处理规则根据操作符所需要配合的数字个数把操作符分为单目操作符,双目操作符和三目操作符 C语言里用+,-,*和/表示加减乘除四则运算,它们都是双目操作符,如果参与除法计算的两个数字 ...
gson转换问题
list集合中integer问题 List<Integer> lists= gson.fromJson(params.get("lists"), new TypeTok ...
Mongodb的锁原子性隔离性一致性
读写锁 Mongodb使用读写锁来来控制并发操作: 当进行读操作的时候会加读锁,这个时候其他读操作可以也获得读锁.但是不能或者写锁. 当进行写操作的时候会加写锁,这个时候不能进行其他的读操作和写操作. ...
POJ1185炮兵阵地(DP状态压缩)
问题描述司令部的将军们打算在N*M的网格地图上部署他们的炮兵部队.一个N*M的地图由N行M列组成,地图的每一格可能是山地(用"H" 表示),也可能是平原(用"P&quo ...
【CF1187E】Tree Painting
题目大意:给定一棵 N 个点的树,初始全是白点.要求你做 N 步操作,每一次选定一个与一个黑点相隔一条边的白点,将它染成黑点,然后获得该白点被染色前所在的白色联通块大小的权值.第一次操作可以任意选点, ...
dispatchEvent 自定义触发事件，常用于自定义鼠标事件或点击事件
自定义事件的触发又是不可避免的,由于浏览器兼容性问题,我们要分开说了,针对标准浏览器和IE6/7等考古浏览器. 1. 对于标准浏览器,其提供了可供元素触发的方法:element.dispatchEve ...

jqGrid整理笔记

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

随机推荐

热门专题