Bootstrap-jqgrid学习（十五）

喵俺第一专栏

已于 2022-12-06 15:04:38 修改

阅读量947

点赞数

分类专栏： # Bootstrap 文章标签： bootstrap 学习前端

于 2022-12-05 23:52:55 首次发布

本文链接：https://blog.csdn.net/dengfengling999/article/details/128191098

版权

Bootstrap 专栏收录该内容

20 篇文章

订阅专栏

通过复制bootstrap代码进行开发，代码非常多，其实bootstrap重点在于它的表格，以后作为管理系统而言，都是对数据完成基本的功能，CRUD

做分页，查询，修改，自己去做的话代价很大，bootstrap只是做了样式的美化，没有给我们提供更加丰富的功能帮助我们处理增删改查

在企业用bootstrap做页面时，为了近一个步增加开发效率，引用一个 jquery的插件叫：jqgrid：数据表格，下面的都不需要我们自己手写了，交给插件，包括分页，查询增删改查等这些javascript代码，我们只关心后台的数据交互，jqgrid与后台交互，使用的是ajax的方式，也就是说它要后台要的是字符串，那么就不允许后台有任何的页面跳转

jqgrid功能非常强大，是一个老牌的jquery数据表格了，帮助我们一次性的构建一个简洁的数据表格，帮我们完成增删改查，页面标签仅仅需要写一到两行，js代码相对写的多一点，jqgrid是一个jquery插件，专注于js

英文网站：

中文网站：

下载jqgrid的依赖：主要使用下面的文件

引入到项目中：

jqgrid的文件引入顺序：

进入页面检查是否引入成功：

不飘红就是引入成功：

用到的参数：

属性：

请求地址：

url

string

获取数据的地址

返回数据类型：

datatype

string

从服务器端返回的数据类型，默认xml。可选类型：xml，local，json，jsonnp，script，xmlstring，jsonstring，clientside

请求方式：

mtype

string

ajax提交方式。POST或者GET，默认GET

表格的名称：与colModel对应

colNames

Array

列显示名称，是一个数组对象

列的显示名称：

colModel

Array

常用到的属性：name 列显示的名称；index 传到服务器端用来排序用的列名称；width 列宽度；align 对齐方式；sortable 是否可以排序

表格属性：

<script>
        $(function(){
            /*
            * jqgrid属性使用方式：将属性以对象的方式作为jqgrid的参数进行传递即可，对象中的属性名：属性值书写
            * 2.jqgrid中的列属性方式
            * */
            //初始化表格
            $("#userList").jqGrid({//属性
                styleUI:"Bootstrap",//用来指定jqgrid的主题样式
                url: "./list.json",//用来远程获取数据的地址 json格式的数据   相当于$.post（） ajax请求后台控制器  这里模仿后台让它访问json文件
                datatype: "json", //用来指定数据返回的数据类型默认是xml
                mtype:"POST",//请求方式，默认get请求
                colNames:["编号","姓名","年龄","生日"],//用来指定标题列的名称  colNames必须和colModel成对出现
                colModel:[
                    {name:"id"},
                    {name:"name"},
                    {name:"age"},
                    {name:"bir"},
                ],

            });
        });
    </script>

列属性：

事件：

方法：

首先需要一个table：

<!--表格标签 1.jquery插件 属性：（文档中是初始化参数大全） 对象{}  事件：  方法：  -->
<table id="userList"></table>

利用js进行调用jqgrid：

<script>
        $(function(){
            /*
            * jqgrid属性使用方式：将属性以对象的方式作为jqgrid的参数进行传递即可，对象中的属性名：属性值书写
            * 2.jqgrid中的列属性方式
            * */
            //初始化表格
            $("#userList").jqGrid({//属性
                styleUI:"Bootstrap",//用来指定jqgrid的主题样式
                url: "./list.json",//用来远程获取数据的地址 json格式的数据   相当于$.post（） ajax请求后台控制器  这里模仿后台让它访问json文件
                datatype: "json", //用来指定数据返回的数据类型默认是xml
                mtype:"POST",//请求方式，默认get请求
                colNames:["编号","姓名","年龄","生日"],//用来指定标题列的名称  colNames必须和colModel成对出现
                colModel:[
                    {name:"id"},
                    {name:"name"},
                    {name:"age"},
                    {name:"bir"},
                ],

            });
        });
    </script>

设置列属性：

对齐方式

align

string

left, center, right.

字段可编辑：

align

string

left, center, right.

对数据进行二次渲染：对应的是一个函数

formatter

mixed

对列进行格式化时设置的函数名或者类型 {name:’sex’,index:’sex’, align:’center’,width:60,editable:true,edittype:’select’,editoptions: {value:’0:待定;1:男;2:女’},formatter:function(cellvalue, options, rowObject){
var temp = “<img src=’/jqGrid/jquery-ui-1.7.2.custom/css/img/”
if(cellvalue==1){
temp = temp +”user-white.png”;
} else if(cellvalue==2){
temp = temp +”user-white-female.png”;
} else {
temp = temp + “user-silhouette.png”;
}
temp = temp + “‘ border=’0 ′ />”
return temp;
}},// 返回性别的图标。

隐藏某列：

hidedlg

boolean

是否显示或者隐藏此列

hidden

boolean

在初始化表格时是否要隐藏此列

取哪个json中的数据作为这列的值：

name

string

表格列的名称，所有关键字，保留字都不能作为名称使用包括subgrid, cb and rn.

列的宽度是否可以改变大小：

resizable

boolean

是否可以被resizable

列的宽度：

width

number

默认列的宽度，只能是象素值，不能是百分比

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jqgrid第一个Demo</title>
    <!--css-->
    <!--引入bootstrap的css-->
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">
    <!--引入jqgrid的核心css-->
    <link rel="stylesheet" href="../static/jqgrid/ui.jqgrid-bootstrap.css">

    <!--js-->
    <!--引入jQuery的文件-->
    <script src="../static/jq/jquery-3.6.0.js"></script>
    <!--引入jqgrid的核心js-->
    <script  src="../static/jqgrid/jquery.jqGrid.min.js"></script>
    <!--引入jqgrid的国际化js-->
    <script  src="../static/jqgrid/grid.locale-cn.js"></script>
    <!--引入bootstrap的js文件-->
    <script src="../static/js/bootstrap.min.js"></script>

    <script>
        $(function(){
            /*
            * jqgrid属性使用方式：将属性以对象的方式作为jqgrid的参数进行传递即可，对象中的属性名：属性值书写  ---对应网站初始化参数大全
            * 2.jqgrid中的列属性方式 列属性使用也是以对象的形式作为colModel的参数进行传递即可  --对应网站ColModel参数大全
            * */

            $("#userList").jqGrid({//属性
                //初始化表格
                styleUI:"Bootstrap",//用来指定jqgrid的主题样式
                url: "./list.json",//用来远程获取数据的地址 json格式的数据   相当于$.post（） ajax请求后台控制器  这里模仿后台让它访问json文件
                datatype: "json", //用来指定数据返回的数据类型默认是xml
                mtype:"POST",//请求方式，默认get请求
                colNames:["编号","姓名","年龄","生日","部门"],//用来指定标题列的名称  colNames必须和colModel成对出现  一个表名对应一个{}
                colModel:[
                    {
                        name:"id",
                        align:"center",
                        //列隐藏
                        //hidedlg:true,
                        //hidden:true

                    },
                    {
                        name:"name",
                        //对齐
                        align:"center",
                        //其否可编辑
                        editable:true,
                        //是否可以改变大小
                        resizable:false,
                        //列的宽度
                        width:300
                    },
                    {
                        name:"age",
                        align:"center",
                        formatter:function(cellvalue, options, rowObject){//用来对数据进二次处理  cellvalue:这列的值 options：这列的Page对象  rowObject：这行的json数据对象
                            //原样渲染
                            //return cellvalue;
                            console.log(cellvalue);
                            console.log(options);
                            console.log(rowObject);
                            //渲染
                            if (cellvalue>23){
                                return "<font color='red'>"+cellvalue+"</font>";
                            }
                            return "<font color='green'>"+cellvalue+"</font>";


                        }
                    },
                    {
                        name:"bir",
                        align:"center"
                    },
                    {
                        //name:"dep.name",
                        name:"depName",
                        align:"center",
                        //使用formatter进行获取对象数据进行渲染
                        formatter:function(cellvalue, options, rowObject){
                            return rowObject.dep.name;
                        }
                    }
                ],

            });
        });
    </script>

</head>
<body>
<!--表格标签 1.jquery插件 属性：（文档中是初始化参数大全） 对象{}  事件：  方法：  -->
<table id="userList"></table>
</body>
</html>

list.json：

[
  {
    "id": "21",
    "name": "xiaochen",
    "age": 23,
    "bir": "2012-12-12",
    "dep": {
      "id": "222",
      "name": "财务部"
    }
  },
  {
    "id": "22",
    "name": "张三",
    "age": 40,
    "bir": "2012-12-12",
    "dep": {
      "id": "222",
      "name": "研发部"
    }
  },
  {
    "id": "23",
    "name": "王五",
    "age": 33,
    "bir": "2012-12-12",
    "dep": {
      "id": "222",
      "name": "技术部"
    }
  },
  {
    "id": "24",
    "name": "李四",
    "age": 50,
    "bir": "2012-12-12",
    "dep": {
      "id": "222",
      "name": "外交部"
    }
  }
]