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

随机推荐

openstack mitaka开启三层网络vxlan
在这之前,先把之前基于flat模式创建的虚机,全部删除控制节点: 配置修改/etc/neutron/neutron.conf的[DEFAULT]区域将 core_plugin = ml2 ser ...
代码报错--------EOFError: Compressed file ended before the end-of-stream marker was reached
背景:运行LeNet识别CIFAR-10的图像的代码时,报错: EOFError: Compressed file ended before the end-of-stream marker was ...
SQLServer中跨服务器跨数据库之间的数据操作
首先必须理解一个概念: select * from sys.servers (查看系统表,看原来的服务器名) 要想跨域就必须在以上信息中可以检索到! 怎样添加? --创建链接服务器 ...
mysql设置自增id清零 auto_increment
清空表数据之后,如何让自增id清零,即从0开始计数呢 ; 想让id从1开始,就让 AUTO_INCREMENT = 1 就行了.
第二章 Vue快速入门-- 23 品牌案例-根据关键字实现数组的过滤
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
微信小程序点击事件传递参数
wxml: data-参数名="值" bindtap="函数名" <view class="buy-button {{cap_select == ...
Angular2 父子组件通信方式
https://www.jb51.net/article/133868.htm 这次给大家带来Angular2 父子组件通信方式,使用Angular2 父子组件通信方式的注意事项有哪些,下面就是实战案 ...
我说CMMI之六：CMMI的评估--转载
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/dylanren/article/deta ...
SQL Server判断表中某字段是否存在【转】
--比如说要判断表A中的字段C是否存在两个方法: 一, IF EXISTS ( FROM SYSOBJECTS T1 INNER JOIN SYSCOLUMNS T2 ON T1.ID=T2.ID W ...
mysql 查询奇偶数
1.特殊字符处理 1.1 奇数 &1 select bi.file_type FILE_TYPE, bi.file_batchid FILE_BATCHID, bi.file_path FIL ...

jqGrid整理笔记

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

随机推荐

热门专题