bootstrap的jqgrid插件的常用表格属性,colname,colmodel,formatter

一.介绍

jqGrid 是一个用来显示网格数据的jQuery插件，通过使用jqGrid可以轻松实现前端页面与后台数据的ajax异步通信。是典型的B／C架构（浏览器／服务器模式），服务器端只需提供数据管理，浏览器只需负责数据显示。

二.特性

1.通过配置url地址数据显示格式

2.支持行编辑，列搜索过滤

3.支持分页

4.添加表单支持文件上传

5.链式调用

三.基本实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!-- bootstrap的核心css   -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<!--    jqgrid的核心css-->
    <link rel="stylesheet" href="../jqgrid/ui.jqgrid-bootstrap.css">
<!--    jquery核心js-->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!--    jqgrid核心js-->
    <script src="../jqgrid/jquery.jqGrid.min.js"></script>
<!--    jqgrid国际化js-->
    <script src="../jqgrid/grid.locale-cn.js"></script>
<!--    bootstrap核心js-->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script>
    $(function () {
        //初始化表格  jqgrid的属性使用方式:将属性以对象方式作为jqgrid的参数进行传递即可，对象中属性名：属性值
        $("#userList").jqGrid(
            {
                styleUI:"Bootstrap",//用来指定jqgrid的样式
                url:"../json/list.json",//用来远程获取数据地址，json格式类型
                datatype:"json",//用来指定服务返回的数据类型 默认是：xml 修改为:json
                mtype:"post",//用来指定请求方式，默认是GET方式（get方式默认是走地址栏）
                colNames:["编号","姓名","年龄","生日","部门"],//用来指定表格中标题列的名称， colname和colmodel（列属性）必须成对出现，长度一致
                colModel:[
                    {name:"id",align:"center"},
                    {name:"name",editable:true},
                    {name:"age",
                        formatter:function (cellvalue,options,rowObject) {//formatter用来对数据进行二次渲染，起到拦截作用
                           if(cellvalue>23){
                               return "<font color='red'>"+cellvalue+"</font>"+" √"
                           }

                            return cellvalue;//原样渲染，cellvalue是原来的值
                        }},
                    {name:"bir"},
                    {name:"dept",
                        formatter:function (cellvalue,options,rowObject) {
                                return rowObject.dept.name;
                        }
                    }
                ]
            }
        );


    });
</script>
</head>
<body>
<table id="userList">
</table>
</body>
</html>

json文件

[
  {
    "id": "21",
    "name": "xiaoming",
    "age": 23,
    "bir": "2020-09-04",
    "dept": {
      "id": "222",
      "name": "小卖部"
    }
  },
  {
    "id": "22",
    "name": "xiaosan",
    "age": 24,
    "bir": "2020-09-04",
    "dept": {
      "id": "333",
      "name": "小卖部2"
    }
  },
  {
    "id": "23",
    "name": "xiaozhao",
    "age": 25,
    "bir": "2020-09-04",
    "dept": {
      "id": "222",
      "name": "小卖部"
    }
  }
]

效果展示

bootstrap的jqgrid插件的常用表格属性,colname,colmodel,formatter

猜你喜欢