『jqgrid』如何使用高级数据表格组件jqgrid

最新推荐文章于 2020-01-18 10:01:26 发布

weixin_33827731

最新推荐文章于 2020-01-18 10:01:26 发布

阅读量115

点赞数

文章标签： json javascript ViewUI

原文链接：https://my.oschina.net/skyler/blog/704058

版权

为什么80%的码农都做不了架构师？>>>

安装jqgrid

要想使用jqgrid，与使用其他js工具库一样，在页面中使用<script>标签直接引用即可。

使用jqgrid

要想在页面中使用jqgrid，主要分为如下几个部分：

在HTML页面中引入jqgrid组件
在脚本文件中，配置jqgrid组件的相关参数
在脚本文件中，为jqgrid从服务端获取数据

在页面中加入jqgrid

在html文件正文中，加入<table id="datagrid"></table>，就完成了jqgrid组件的引入。

为了使引入的jqgrid组件生效，还需要引入jqgrid库文件，以及其依赖的jquery文件。可以选择性的引入i18n文件，用以支持本地语言。

在下面代码中，<table>标签中的datagrid主要用于从脚本文件中取得相应的组件，具体的名称可以自己选取，而不必使用一样的。

<head>
    <title>jqgrid使用演示</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>

    <table id="datagrid"></table>

    <!-- javascript libs import -->
    <script src="js/jquery-1.11.0.min.js" charset="utf-8"></script>
    <script src="js/jquery.jqGrid.min.js" charset="utf-8"></script>
    <script src="js/i18n/grid.locale-cn.js" charset="utf-8"></script>

    <!-- custom source -->
    <script>

    </script>
</body>

配置jqgrid

在html页面中，完成jqgrid组件的引入后，就需要对jqgrid组件进行配置。只有完成了相应的配置，才能够在最终页面中看到jqgrid组件。

1. 获取页面中的jqgrid组件。

    jQuery(document).ready(function(){
        jQuery("#datagrid").jqGrid({

        });
    });

2. 配置jqgrid组件的列

在下面代码中，

colNames参数用于指明组件的列标题，原则上，有几列，数组中就需要有几个元素。
colModel参数用于指明组件列的属性，包括对应于传入数据字典的key，包括排序使用的索引，包括是否支持重新调整列宽等。

    jQuery(document).ready(function(){
        jQuery("#datagrid").jqGrid({
            colNames:['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
            colModel:[
                {name:'monday'},
                {name:'tuesday'},
                {name:'wednesday'},
                {name:'thursday'},
                {name:'friday'},
                {name:'saturday'},
                {name:'sunday'}
            ]
        });
    });

3. 配置组件行

下面代码中，rowNum表示组件中显示的行的数量，rowList表示可供选择的，组件中显示多少行数。

    jQuery(document).ready(function(){
        jQuery("#datagrid").jqGrid({

            ......

            rowNum: 10,
            rowList: [10, 20, 50, 100, 500, 1000],

            ......

        });
    });

获取数据

在下面的代码中，

url表示从哪里获取数据，一般是一个url地址。
datatype表示获取到的数据类型是怎样的，这里使用的是JSON。
mtype表示使用何种HTTP方法来获取数据，一般使用GET或POST。

    jQuery(document).ready(function(){
        jQuery("#datagrid").jqGrid({
            
            ......

            url:"db.json",
            datatype:"json",
            mtype:"GET"

            ......
        });
    });

完整代码

<head>
    <title>jqgrid使用演示</title>



    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>

    <table id="datagrid"></table>



    <!-- javascript libs import -->
    <script src="js/jquery-1.11.0.min.js" charset="utf-8"></script>
    <script src="js/jquery.jqGrid.min.js" charset="utf-8"></script>
    <script src="js/i18n/grid.locale-cn.js" charset="utf-8"></script>

    <!-- custom source -->
    <script>

    jQuery(document).ready(function(){
        jQuery("#datagrid").jqGrid({
            colNames:['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
            colModel:[
                {name:'monday'},
                {name:'tuesday'},
                {name:'wednesday'},
                {name:'thursday'},
                {name:'friday'},
                {name:'saturday'},
                {name:'sunday'}
            ],

            rowNum: 10,
            rowList: [10, 20, 50, 100, 500, 1000],

            url:"db.json",
            datatype:"json",
            mtype:"GET"
        });
    });

    </script>
</body>

转载于:https://my.oschina.net/skyler/blog/704058