JqGrid应用

wyf

浏览: 436619 次
性别:
来自: 唐山

最近访客更多访客>>

dreamsnake

xiaoxiaoHer

msl151

ALongLostPenpal_

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JS
JQuery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>http://stackoverflow.com/q/10850978/315935</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="author" content="Oleg Kiriljuk"/>
    <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.20/themes/redmond/jquery-ui.css"/>
    <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.3/css/ui.jqgrid.css"/>
    <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery-ui-multiselect/1.12/jquery.multiselect.css"/>
    <style type="text/css">
        html, body { font-size: 75%; }
        .ui-jqgrid-hdiv { overflow-y: hidden; }
    </style>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.20/jquery-ui.min.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.3/js/i18n/grid.locale-en.js"></script>
    <script type="text/javascript">
        $.jgrid.no_legacy_api = true;
        $.jgrid.useJSON = true;
    </script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.3/js/jquery.jqGrid.min.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery-ui-multiselect/1.12/jquery.multiselect.js"></script>

    <script type="text/javascript">
    //<![CDATA[
    $(function () {
        "use strict";
        var mydata = [
                { id: "1",  invdate: "2007-10-01", name: "test1",  note: "note1",  amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00" },
                { id: "2",  invdate: "2007-10-02", name: "test2",  note: "note2",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
                { id: "3",  invdate: "2007-09-01", name: "test3",  note: "note3",  amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
                { id: "4",  invdate: "2007-10-04", name: "test4",  note: "note4",  amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00" },
                { id: "5",  invdate: "2007-10-31", name: "test5",  note: "note5",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
                { id: "6",  invdate: "2007-09-06", name: "test6",  note: "note6",  amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
                { id: "7",  invdate: "2007-10-04", name: "test7",  note: "note7",  amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00" },
                { id: "8",  invdate: "2007-10-03", name: "test8",  note: "note8",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
                { id: "9",  invdate: "2007-09-01", name: "test9",  note: "note9",  amount: "400.00", tax: "30.00", closed: false, ship_via: "TN", total: "430.00" },
                { id: "10", invdate: "2007-09-08", name: "test10", note: "note10", amount: "500.00", tax: "30.00", closed: true,  ship_via: "TN", total: "530.00" },
                { id: "11", invdate: "2007-09-08", name: "test11", note: "note11", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" },
                { id: "12", invdate: "2007-09-10", name: "test12", note: "note12", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" }
            ],
            $grid = $("#list"),
            initDateEdit = function (elem) {
                $(elem).datepicker({
                    dateFormat: "dd-M-yy",
                    autoSize: true,
                    changeYear: true,
                    changeMonth: true,
                    showButtonPanel: true,
                    showWeek: true
                });
            },
            initDateSearch = function (elem) {
                setTimeout(function () {
                    $(elem).datepicker({
                        dateFormat: "dd-M-yy",
                        autoSize: true,
                        changeYear: true,
                        changeMonth: true,
                        showWeek: true,
                        showButtonPanel: true
                    });
                }, 100);
            },
            numberTemplate = {formatter: "number", align: "right", sorttype: "number",
                editrules: {number: true, required: true},
                searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"] }};
        $grid.jqGrid({
            data: mydata,
            datatype: "local",
            colNames: ["Client", "Date", "Amount", "Tax", "Total", "Closed", "Shipped via", "Notes"],
            colModel: [
                { name: "name", align: "center", width: 65, editrules: {required: true},
                    formoptions:{rowpos: 1, colpos: 1} },
                { name: "invdate", width: 80, align: "center", sorttype: "date",
                    formatter: "date", formatoptions: { newformat: "d-M-Y" }, datefmt: "d-M-Y",
                    editoptions: { dataInit: initDateEdit },
                    formoptions:{rowpos: 1, colpos: 2},
                    searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"], dataInit: initDateSearch } },
                { name: "amount", width: 75, template: numberTemplate,
                    formoptions:{rowpos: 2, colpos: 1}},
                { name: "tax", width: 52, template: numberTemplate,
                    formoptions:{rowpos: 2, colpos: 2} },
                { name: "total", width: 60, template: numberTemplate,
                    formoptions:{rowpos: 3, colpos: 1} },
                {name: "closed", width: 70, align: "center", formatter: "checkbox",
                    edittype: "checkbox", editoptions: {value: "Yes:No", defaultValue: "Yes"},
                    stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;true:Yes;false:No" },
                    formoptions:{rowpos: 3, colpos: 2} },
                {name: "ship_via", width: 105, align: "center", formatter: "select",
                    edittype: "select", editoptions: {
                        value: "FE:FedEx;TN:TNT;IN:Intim",
                        defaultValue: "IN",
                        dataInit: function(elem) { $(elem).css("margin-top", "8px" ); }},
                    stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;FE:FedEx;TN:TNT;IN:IN" },
                    formoptions:{rowpos: 4, colpos: 1} },
                { name: "note", width: 60, sortable: false, edittype: "textarea",
                    formoptions: {rowpos: 4, colpos: 2} }
            ],
            cmTemplate: { editable: true },
            pager: "#pager",
            rowNum: 10,
            rowList: [5, 10, 20, 50],
            sortname: "id",
            sortorder: "asc",
            viewrecords: true,
            gridview: true,
            height: "100%",
            caption: "Demonstrate the usage of jQuery UI MultiSelect Widget"
        });
        $.extend($.jgrid.view, { width: 450, recreateForm: true });
        $.extend($.jgrid.edit, { width: 450, recreateForm: true });
        $grid.jqGrid("navGrid", "#pager", {view: true});
    });
    //]]>
    </script>
</head>

<body>
    <table id="list"><tr><td></td></tr></table>
    <div id="pager"></div>
</body>
</html>

分享到：

jqGrid添加行按钮，添加工具栏自定义按钮 | MVC Post得到 request

2015-08-12 14:12
浏览 700
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

JqGrid应用

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

JqGrid应用

评论

发表评论

相关推荐

柯里化函数

作用域安全的构造函数

JS检测浏览器弹出窗口是否被屏蔽

组合继承

Js逻辑与或操作符

Js 观察者模式

兼容所有浏览器事件注册

元素的各种位置，偏移量，大小，滚动。

用户代理字符串检测,检测呈现引擎、平台、Windows 操作系统、移动设备 和游戏系统

JavaScript寄生组合式继承

jquery.validate动态加规则

什么是JSONP

DatePicker - jQuery 的日期选择控件

Table 导出数据tableExport.jquery.plugin

jqgrid刷新当前页面

ace加 jqueryui 的 dialog弹出窗口

jqGrid添加行按钮，添加工具栏自定义按钮

AngularJS入门教程

六款帮助你实现惊艳视差滚动效果的jQuery插件

Angularjs学习地址

最近访客更多访客>>

用户代理字符串检测,检测呈现引擎、平台、Windows 操作系统、移动设备和游戏系统