`
wyf
  • 浏览: 438016 次
  • 性别: Icon_minigender_1
  • 来自: 唐山
社区版块
存档分类
最新评论

JqGrid应用

 
阅读更多
<!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应用

    **jqGrid应用** jqGrid是一款基于jQuery的开源数据网格插件,它提供了强大的数据展示、编辑和管理功能,尤其适用于Web应用程序中展示大量的结构化数据。对于初学者来说,掌握jqGrid的应用是提升Web开发效率的重要一...

    jqGrid dialog例子

    在jqGrid应用中,Model代表数据模型,View是用户界面,Controller负责协调Model和View之间的交互。 接下来,dialog组件是jQuery UI的一部分,它允许创建可定制的对话框,通常用于显示额外的信息或执行特殊操作。在...

    mvc jqgrid 应用

    ### MVC + Jqgrid + 存储过程应用详解 在本篇内容中,我们将深入探讨一个结合了MVC架构、JqGrid插件以及SQL Server存储过程的应用案例。该案例展示了如何在一个MVC项目中利用JqGrid进行数据展示,并通过存储过程...

    JQGrid 入门案例

    通过以上步骤,我们可以构建一个基础的JQGrid应用,包括JSON数据的加载、增删改查操作、下拉框和文本框的使用等。随着对JQGrid的深入学习,我们可以进一步定制样式、优化性能,甚至实现更复杂的功能,比如分组、排序...

    JqGrid For ASP.Net

    6. **sample_project**:示例项目文件夹,包含一个完整的JqGrid应用实例,供开发者参考和学习。 7. **js**:JavaScript库和JqGrid相关的脚本文件,包括JqGrid的核心脚本和其他辅助脚本。 综上所述,JqGrid for ASP...

    jqGrid的例子,按照官方网络上面配置的。

    jqGrid是一款功能强大的JavaScript数据网格插件,常用于在网页上展示、操作和管理大量结构化数据。它基于jQuery库,提供了丰富...无论是在Ubuntu还是Windows环境下,开发者都可以参考这个示例来搭建自己的jqGrid应用。

    JqGrid国际化Demo.zip

    通过正确加载语言文件、配置初始化选项以及可能的自定义翻译,我们可以创建一个能适应多种语言环境的JqGrid应用。这不仅提高了用户体验,也增强了应用的全球化适应性。在实际开发中,可以根据项目需求调整和扩展这些...

    jqGrid表格内容查询读取代码.zip

    总之,这个压缩包提供了一个基础的jqGrid应用实例,适合初学者学习和理解如何在HTML5环境中集成和使用jqGrid。通过研究和修改这个示例,你可以掌握如何动态加载数据、实现搜索和排序功能,以及如何定制和美化表格。...

    jqGrid实例demo

    在"jqGrid实例demo"中,我们可以看到一个实际的jqGrid应用示例,帮助我们理解和学习如何在项目中运用这个工具。 1. **安装与引入** 在开始使用jqGrid前,我们需要下载jqGrid的JavaScript和CSS文件,并将其引入到...

    jqGrid详解及高级应用

    在实际应用中,以XML数据获取方式为例,开发者需要配置后台页面(如XMLData.aspx)并确保其返回数据格式与xmlReader要求的格式匹配。xmlReader的配置项包括字段映射、页码、数据总条数、记录数等关键信息。 以上...

    jqgrid 项目手把手开发文档

    通过上述步骤,我们不仅完成了开发环境的搭建,还构建了一个基本的jqGrid应用示例。这些内容覆盖了从环境配置到具体项目实施的全过程,对于初学者来说是非常有价值的参考资料。同时,也提醒开发人员在实际项目中遵循...

    struts1-hibernate-spring框架中jqgrid页面生成详解

    首先,我们来看一下S1SH中jqGrid应用的基本步骤: 1. **Action层控制**:当用户发起请求时,Action层接收请求并处理。在提供的代码示例中,`query`方法被调用,返回一个ActionForward对象,指定要跳转的页面。例如...

    jqGrid表格应用——新增与删除数据

    在"jqGrid表格应用——新增与删除数据"这个主题中,我们可以探讨以下知识点: 1. **jqGrid的基本结构**:jqGrid的HTML结构通常包括一个`&lt;table&gt;`元素,以及必要的CSS和JavaScript引用。例如,`index.html`可能包含`...

    JqGrid插件+JqGridDemo+JqGrid主题

    JqGrid是一款强大的JavaScript表格插件,用于在Web应用程序中展示和操作数据。它基于jQuery库,提供了丰富的功能,如数据排序、筛选、分页、编辑、添加、删除和保存等,极大地增强了网页中表格的交互性和数据管理...

    jqgrid中文文档API

    它基于jQuery库,提供了许多强大的功能,例如排序、过滤、编辑、分页等,使得开发者可以快速创建复杂的表格应用程序。本文将详细介绍jQgrid的中文文档API,涵盖了其原理、使用方法、参数配置、事件处理、数据处理、...

    jqGrid_api中文文档

    jqGrid是一个用于Web应用程序的JavaScript表格插件,它遵循典型的B/S(浏览器/服务器)架构。在这种架构中,服务器端负责数据管理,而客户端则用于数据展示和用户交互。jqGrid可以简化数据库信息的展示,并能将...

    jqGrid4.6完整包

    1. **jqGrid 简介**:jqGrid 是一款基于 jQuery 的开源网格插件,它提供了数据管理、排序、搜索、分页等功能,广泛应用于数据密集型应用。jqGrid4.6 是其一个稳定版本,具有良好的兼容性和丰富的特性。 2. **可编辑...

    JqGrid中文API文档

    JqGrid是一款强大的JavaScript数据网格组件,用于在Web应用程序中展示和操作数据。它基于jQuery库,提供了丰富的功能,如分页、排序、过滤、编辑和格式化数据。本中文API文档将帮助开发者深入理解并有效利用JqGrid的...

    jqGrid中文文档.doc

    jqGrid 是一个基于 jQuery 的数据网格插件,用于在...在实际应用中,你可以根据项目需求选择合适的组件和配置,以实现高效的数据管理界面。通过深入理解 jqGrid 的 API 和各种选项,可以定制化地满足不同场景的需求。

    jqGrid demo (完整版)

    这个"jqGrid demo (完整版)"提供了一个全面的示例,可以帮助开发者更好地理解和应用 jqGrid,无论是在 PHP 或 JSP 环境中。 1. **jqGrid 简介** jqGrid 提供了丰富的功能,包括分页、排序、搜索、编辑、添加、...

Global site tag (gtag.js) - Google Analytics