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

随机推荐

牛客练习赛47 DongDong数颜色（莫队算法）
链接:https://ac.nowcoder.com/acm/contest/904/E 来源:牛客网 DongDong数颜色时间限制:C/C++ 1秒,其他语言2秒空间限制:C/C++ 5242 ...
CSS三角的写法（兼容IE6）
目录简介优点原理 1. 先创建一个div 2. 然后给div设定边框. 3. 给div的四个边框都设置不同的颜色 4. 把宽度和高度都变成0 5. 其余角为透明 6. 兼容IE6浏览器造成这样 ...
javasctipt之DOM知识点
一:DOM节点子节点:childNodes 父节点:parentNode offsetPrent 二:元素属性操作方式一:xxx.style.xxx 方式二:xxx.style["xxx ...
[洛谷P1607] 庙会班车
题目描述 Although Farmer John has no problems walking around the fair to collect prizes or see the shows ...
Django+BootstrapTable实现表格分页
models.py: from django.db import models # Create your models here. class Article(models.Model): titl ...
SQL Server里Grouping Sets的威力【转】
在SQL Server里,你有没有想进行跨越多个列/纬度的聚集操作,不使用SSAS许可(SQL Server分析服务).我不是说在生产里使用开发版,也不是说安装盗版SQL Server. 不可能的任务 ...
C# 获取系统信息
public string GetMyOSName() { //获取当前操作系统信息 OperatingSystem MyOS = Envir ...
计算机网络（十二），Socket简介
目录 1.Socket简介 2.Socket工作原理十二.Socket简介 1.Socket简介 2.Socket工作原理
cogs1619. [HEOI2012]采花 x
1619. [HEOI2012]采花 ★★☆ 输入文件:1flower.in 输出文件:1flower.out 简单对比时间限制:5 s 内存限制:128 MB [题目描述] 萧薰儿是 ...
mysql内存分配问题
云数据库 MySQL 的内存是重要的性能参数,常出现由异常 SQL 请求以及待优化的数据库导致的内存利用率升高的情况,严重时还会出现由于 OOM 导致实例发生 HA 切换,影响业务的稳定及可用性. M ...

jqGrid整理笔记

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

随机推荐

热门专题