用jqrid插件写的一个demo

最新推荐文章于 2022-08-30 09:51:51 发布
最新推荐文章于 2022-08-30 09:51:51 发布
阅读量530 收藏 1
点赞数 1
分类专栏： html css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Buddha_ITXiong/article/details/80191598
版权
javascript 同时被 3 个专栏收录
33 篇文章 1 订阅
订阅专栏
css
9 篇文章 0 订阅
订阅专栏
html
6 篇文章 0 订阅
订阅专栏

网上关于jqrid插件的用法和文档一大堆，在这里我就不提了，写这篇博客的主要目的就是记录一下自己在用jqrid作项目的过程中遇到的一些小问题拿出来给大家分享一下，当然大佬可以直接无视。。。。。

要解决的问题：

  1. 初次渲染表格数据与切换搜索条件更新表格数据
  2. 表格字段中默认只显示text文本，如果想在某个td中显示图片或按钮(例如表格中最后一列一般会有操作按钮)该如何展示？
  3. 某个td中要显示的内容不能直接使用后台返回的字段值，而是要经过加工处理后才能使用，该怎么办？
  4. 复选框获取所有被选中行的id来进行删除等操作
  5. 切换条件渲染不同字段的表格
  6. 其它功能如表格自带的增删改查，配置底部导航栏按钮，表格标题等等等功能此博客不做解释，功能太多讲不完，自己根据文档慢慢熟悉即可，我是本着用到什么就学什么，遇到什么问题就针对性解决什么问题的性格

解释说明：

项目中要用到的插件如jquery,bootstrap,jqrid等请自己下载到本地或引用cdn文件等替换我的引用路径

common.js文件主要是模拟假数据函数以及jqrid相应功能的封装函数

index.js文件中主要是处理获取用户列表数据并渲染页面，下拉框选择事件，全删除按钮事件


效果图：


index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0"/>
    <link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="plugins/jqgrid/ui.jqgrid.css">
    <title>jqrid测试</title>
</head>
<body>
<div class="content" style="padding: 50px;">
    <select name="select" id="select" style="width: 300px;height: 30px;margin-bottom: 10px;">
        <option value="0">全部</option>
        <option value="1">boy</option>
        <option value="2">girl</option>
    </select>

    <div style="height: 60px;line-height: 60px;">
        <button class="btn btn-warning btn-md">删除</button>
    </div>
    <!--jqrid表格开始-->
    <div class="jqGrid_wrapper">
        <table id="jqgrid_table"></table>
        <div id="jqgrid_page"></div>
    </div>
    <!--jqrid表格结束-->
</div>
</body>
<script src="plugins/jquery/jquery.min.js"></script>
<script src="plugins/bootstrap/bootstrap.min.js"></script>
<script src="plugins/jqgrid/i18n/grid.locale-cn.js"></script>
<script src="plugins/jqgrid/jquery.jqGrid.min.js"></script>
<script src="js/common.js"></script>
<script src="js/index.js"></script>
</html>


common.js

//定义获取数据函数 (demo用的写死的数据，动态数据请根据自己项目中的接口来获取)
function getData(sex){
    var data=[
        {id:1,name:"测试1",age:10,sex:"boy",job:"IT狗",isLiveSchool:false},
        {id:2,name:"测试2",age:20,sex:"girl",job:"IT狗",isLiveSchool:false},
        {id:3,name:"测试3",age:30,sex:"girl",job:"IT狗",isLiveSchool:false},
        {id:4,name:"测试4",age:35,sex:"boy",job:"IT狗",isLiveSchool:true},
        {id:5,name:"测试5",age:40,sex:"girl",job:"IT狗",isLiveSchool:false},
        {id:6,name:"测试6",age:21,sex:"boy",job:"IT狗",isLiveSchool:false},
        {id:7,name:"测试7",age:25,sex:"boy",job:"IT狗",isLiveSchool:true},
        {id:8,name:"测试8",age:28,sex:"girl",job:"IT狗",isLiveSchool:false},
        {id:9,name:"测试9",age:60,sex:"boy",job:"IT狗",isLiveSchool:false},
        {id:10,name:"测试10",age:40,sex:"girl",job:"IT狗",isLiveSchool:true},
        {id:11,name:"测试11",age:27,sex:"boy",job:"IT狗",isLiveSchool:false},
        {id:12,name:"测试12",age:18,sex:"girl",job:"IT狗",isLiveSchool:false},
        {id:13,name:"测试13",age:33,sex:"boy",job:"IT狗",isLiveSchool:true},
        {id:14,name:"测试14",age:45,sex:"boy",job:"IT狗",isLiveSchool:false},
        {id:15,name:"测试15",age:32,sex:"girl",job:"IT狗",isLiveSchool:true}
    ];
    var array_boy=[];
    var array_sex=[];
    data.filter(function(item,index){
        console.log(item,index);
        if(item.sex=="boy"){
            array_boy.push(item);
        }else{
            array_sex.push(item);
        }
    });
    if(sex=="全部"){
        return data;
    }
    else if(sex=="boy"){
        return array_boy;
    }else{
        return array_sex
    }

}

//定义生成jqraid表格函数
/*
 @params
 tableId:表格容器id
 pagerId:分页容器id
 data:表格要渲染的数据
 colNames:表格的字段名称
 colModel:表格各字段的属性
 */
function creatTable( data, colNames, colModel,tableId, pagerId) {
    tableId = tableId || 'jqgrid_table';
    pagerId  =pagerId || 'jqgrid_page';
    var grid = $("#"+tableId);
    grid.jqGrid({
        data: data,
        datatype: "local", //从服务器端返回的数据类型，默认xml。可选类型：xml，local，json，jsonnp，script，xmlstring，jsonstring，clientside
        height: 300, //表格高度，可以是数字，像素值或者百分比
        width:1000,
        autowidth: true,
        autoScroll: true,
        shrinkToFit: true,//如果为ture，则按比例初始化列宽度。如果为false，则列宽度使用colModel指定的宽度
        multiselect: true,//复选框
        rowNum: 20,//在grid上显示记录条数，这个参数是要被传递到后台
        rowList: [10, 20, 30],//一个下拉选择框，用来改变显示记录数，当选择时会覆盖rowNum参数传递到后台
        colNames: colNames,
        colModel: colModel,
        pager: "#"+pagerId,//定义翻页用的导航栏，必须是有效的html元素。翻页工具栏可以放置在html页面任意位置
        viewrecords: true,//定义是否要显示总记录数
        hidegrid: false//启用或者禁用控制表格显示、隐藏的按钮，只有当caption 属性不为空时起效
    });
    grid[0].addJSONData(data);
}


index.js

//〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓函数调用分割线〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
getUserList("全部");//调用获取用户列表函数


//〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓函数定义分割线〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
//定义查询用户函数
function getUserList(sex) {
    var data=getData(sex);//获取要传递给jqrid插件的data数据
    console.log(data);
    var colNames = ['编号',  '姓名', '年龄', '性别', '工作',"是否住校",  "操作"];
    var colModel = [
        {name: "id", width: 50},
        {name: "name", width: 120},
        {name: "age", width: 100},
        {name: "sex", width: 100},
        {name: "job", width: 100},
        {name:"isLiveSchool",width:100},
        {name: 'option', width: 150, formatter: handleOption}
    ];
    $.jgrid.defaults.styleUI = 'Bootstrap';
    creatTable(data, colNames, colModel);//调用生成表格函数
}

//定义处理数据函数
function handleOption(value, grid, rows, state) {
    var colModel = grid.colModel.name;
    switch (colModel) {
        case "isLiveSchool":
             if(rows.isLiveSchool){
                 return "是";
             }else{
                 return "否";
             }
        case "option":
            return '<button class="btn btn-success btn-sm" type="button" value="' + rows.id + '" οnclick="editHandle(this)">' +
                '<i class="fa fa-edit"></i>&nbsp;编辑 ' +
                '</button>' +
                '<button class="btn btn-warning btn-sm" type="button" value="' + rows.id + '" οnclick="deleteHandle(this)"> ' +
                '<i class="fa fa-remove"></i>&nbsp;删除 ' +
                '</button>';
            break;
    }
}


//〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓点击事件分割线〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
//下拉框切换事件
$("#select").on("change",function(){
    $(".jqGrid_wrapper").remove();
    var html='<div class="jqGrid_wrapper"> <table id="jqgrid_table"></table> <div id="jqgrid_page"></div> </div>';
    $(".content").append(html);
     var sex= $("#select option:selected").text();
    getUserList(sex);
});


 $("#btn").on("click",function(){
     $(".jqGrid_wrapper").remove();
     var html='<div class="jqGrid_wrapper"> <table id="jqgrid_table"></table> <div id="jqgrid_page"></div> </div>';
     $(".content").append(html);
     var data=[
         {id:100,id1:100,id2:100,id3:100},
         {id:100,id1:100,id2:100,id3:100},
         {id:100,id1:100,id2:100,id3:100},
         {id:100,id1:100,id2:100,id3:100},
         {id:100,id1:100,id2:100,id3:100},
         {id:100,id1:100,id2:100,id3:100}
     ];
     console.log(data);
     var colNames = ['id',  'id1', 'id2', 'id3'];
     var colModel = [
         {name: "id", width: 50},
         {name: "id1", width: 120},
         {name: "id2", width: 100},
         {name: "id3", width: 100}
     ];
     $.jgrid.defaults.styleUI = 'Bootstrap';
     creatTable(data, colNames, colModel);//调用生成表格函数
 });


//点击全部删除按钮事件
$("#btn_all").on("click",function(){
    var ids = $("#jqgrid_table").jqGrid('getGridParam','selarrrow');
    alert("要删除的id项为："+ids);
});


知识点讲解：

1.属性colNames是配置表格中的列，一定要是数组

var colNames = ['编号',  '姓名', '年龄', '性别', '工作',"是否住校",  "操作"];

2.属性colModel为数组对象，每个元素对应一个表格的列，

    name：列的字段值也就是你要展示的后台接口返回的字段值,

   width：每列定义的宽度值，像素为px，暂不支持百分比

   formatter:为格式化数据属性，也就是对后端返回的数据做处理，属性值为函数，具体用法参照我代码中的自定义函数        handleOption，注意，这个属性功能强大，可以让你在td中展示任何形式的数据，包括图片，按钮等，而不仅仅是默认的文本值，函数有四个参数value,grid,rows,state,其中rows为每列数据的值，最好是自己分别打印出来看看他们到底是代表什么意思

var colModel = [
    {name: "id", width: 50},
    {name: "name", width: 120},
    {name: "age", width: 100},
    {name: "sex", width: 100},
    {name: "job", width: 100},
    {name:"isLiveSchool",width:100},
    {name: 'option', width: 150, formatter: handleOption}
];

3.common.js文件grid分装的函数中这句代码很重要，如果你初次渲染完表格数据之后，想要切换查询条件来获取不同的数据来更新表格，不加这句代码是没有效果的，切记，切记，切记

grid[0].addJSONData(data);

4.如果多选选中了很多行后，想做一些类似删除的操作的话，肯定是需要拿到你选中的那些行的id值，那么id值如何获取呢，千万不要傻乎乎的去循环页面上的dom结构，获取哪些被选中的tr然后再获取tr上面的id值，最后在push到一个数组里面，其实jqrid已经给我们封装好了的，只需要一句代码就好了，变量ids就是被选中行的id数组

var ids = $("#jqgrid_table").jqGrid('getGridParam','selarrrow');


5.如果用户要根据不同的条件渲染不同字段的表格的话光靠配置不同的colName和colModel是没有效果的，必须要在切换的时后再重新请求数据之前把现有的表格dom移除之后再重新添加到页面上


Buddha_ITXiong
关注
专栏目录
jQuery中所用到的第三方插件
郭贝贝的博客编程
07-05 866
我在jquery的学习中，用到了三个第三方的插件，为了能够更方便的查看，把在jQuery中用到的第三方插件整合一个。首先是cookie插件cookie插件在jquery中的js样式：cookie在jquery中主要是用来换肤/*! * jQuery Cookie Plugin v1.4.0 * https://github.com/carhartl/jquery-cookie * * Co...
Jquery 插件开发 demo
个人笔记
12-22 357
/闭包限定命名空间 (function ($) { $.fn.extend({ "highLight": function (options) { //检测用户传进来的参数是否合法 if (!isValid(options)) return this; var opts
jQuery插件学习三：一个demo
weixin_34043301的博客
03-18 192
2019独角兽企业重金招聘Python工程师标准>>> ...
jquery插件开发规范
weixin_34402408的博客
06-18 182
来源于:https://github.com/woodens/   jQuery插件开发方式主要有三种： 通过$.extend()来扩展jQuery 通过$.fn 向jQuery添加新的方法 通过$.widget()应用jQuery UI的部件工厂方式创建 第一种方式太简单，仅仅是在jQuery命名空间或者理解成jQuery身上添加了一个静态方法而已，所以我们调...
jQuery插件开发
neeleon的专栏
08-09 164
一，首先，制作jQuery插件需要一个闭包 (function ($) {        //code in here })(jQuery);   这是来自jQuery官方的插件开发规范要求，使用这种编写方式有什么好处呢？ a) 避免全局依赖。 b) 避免第三方破坏。 c) 兼容jQuery操作符'$'和'jQuery '   二，有了闭包，在其中加入...
chrome插件开发,完整demo
09-26
chrome插件开发,完整demo,包含 这是一个popup页面！ background 打开background 调用background页JS方法 获取background页的标题 设置background页标题 (验证background生命周期和单实例特性) 窗口操作演示 新窗口...
Golang，并写一个Demo程序
最新发布
08-26
介绍了Golang，并写一个Demo程序
海康视频监控预览插件及demo
08-12
海康视频监控预览插件及demo是针对海康威视监控系统开发的一款应用程序，它为开发者提供了一个直观且易用的平台，用于理解和实践如何与海康的监控设备进行交互。这款demo不仅包含了预览功能，还可能包括录像回放、...
离线使用百度地图的一个demo
06-21
为了能够离线使用百度地图，网上找了一些资源，写了一个demo，能够简单离线使用百度地图的部分api。需要下带瓦片图，配置map.js等文件，主要是配置麻烦一点，使用跟正常的百度地图没啥区别。本文件仅上传必须配置...
基于jQuery.i18n.properties 实现前端页面的资源国际化Demo 源码
09-01
该Demo源码是博文《基于jQuery.i18n.properties 实现前端页面的资源国际化》里面的源码Demo。博文地址：http://blog.csdn.net/aixiaoyang168/article/details/49336709。 可供下载学习使用。
jquery插件开发之实现google+圈子选择功能
10-26
最近项目中用到的一个效果，类似于Google+的添加圈子功能。本文插件约8成封装，好多功能是依据项目中实际需求写的。若要使用，可根据自身情况扩展修改
一个简单的jQuery插件制作 学习过程及实例
12-02
一，首先，制作jQuery插件需要一个闭包 代码如下: (function ($) { //code in here })(jQuery); 这是来自jQuery官方的插件开发规范要求，使用这种编写方式有什么好处呢？ a) 避免全局依赖。 b) 避免第三方破坏。 c) 兼容jQuery操作符’$’和’jQuery ‘ 二，有了闭包，在其中加入插件的骨架 代码如下: $.fn.dBox = function (options) { var defaults = { //各种属性及其默认值 }; var opts = $.extend(defaults, options); //functi
jq插件的基础知识，以及小demo
CodePrincess的博客
05-05 880
什么是插件 ，jq插件，优点，缺点 ，未完待续… JQ插件就是用JQ代码编写的工具。就比如说我们用的模板，如EasyUi。我们只需要引入EasyUi的JS文件，然后调用它对应的方法，效果就出来了。实现代码的可重用性，以及功能解耦。方便我们使用，我们只需要引入JQ插件的.JS脚本，然后直接调用就可以了 1.关于立即执行函数：(function(){})() 这是一个自调函数，函数定义好之后自动执行。（function(){}）表示一个匿名函数，而后面紧跟着的（）表示立即调用此函数。而且（）也是向函数传递参数
Jqgrid 详解
热门推荐
qq_27009517的博客
05-19 1万+
Jqgrid入门-显示基本的表格(一) 首先对Jqgrid网格插件做个简要的说明。在众多的表格插件中，Jqgrid的特点是非常鲜明的。 特点如下: 完整的表格呈现与运算功能，包含换页、栏位排序、grouping、新增、修改及删除资料等功能。 自定义的工具列。 预设的Navigator工具列，可以很容易的使用新增、删除、编辑、检视及搜寻等功能。 完整的分页功能。 按下任一栏位的标头，皆可以该栏位为排序项目。无论是升序或降序皆可。 预设的action formatter，可以快...
JqGrid 使用方法详解 一
weixin_71588037的博客
08-30 4831
JqGrid 使用方法详解 一
JqGrid 使用方法详解 三
weixin_71588037的博客
08-30 758
JqGrid 使用方法详解 三
jQrid常用操作（转帖）
weixin_30644369的博客
12-01 72
转自：http://blog.csdn.net/zhcj3672/article/details/6944955 JqGrid相关操作备忘方法列表 1.获得当前列表行数： $("#gridid").getGridParam("reccount"); 2.获取选中行数据（json）： $("#gridid").jqGrid('getRowDat...
jqGrid 学习笔记整理——基础篇
XeonMic的博客
01-28 7921
jqGrid 学习笔记整理——基础篇 本人在官网的示例中学习的非常困难，现通过慢慢摸索学习已实现基本功能，特总结下来留给初学者们。 jqGrid 是一个用来显示网格数据的jQuery插件，通过使用jqGrid可以轻松实现前端页面与后台数据的ajax异步通信。
写一个tp6的插件demo
06-06
好的，下面是一个简单的TP6插件Demo。 1. 创建插件目录和文件夹 在TP6应用的根目录下创建plugins目录，然后在plugins目录下创建一个名为HelloPlugin的文件夹。 2. 创建插件入口文件 在HelloPlugin文件夹下创建一个Plugin.php文件，然后在Plugin.php文件中定义一个install方法，用于加载插件的路由。 ```php <?php namespace plugins\HelloPlugin; class Plugin { public function install() { // 加载路由 include __DIR__ . '/route.php'; } } ``` 3. 定义路由 在HelloPlugin文件夹下创建一个route.php文件，用于定义插件的路由。 ```php <?php use think\facade\Route; Route::get('/hello', function () { return 'Hello, I am a TP6 plugin!'; }); ``` 4. 注册插件 在应用的启动文件（如public/index.php）中注册插件。 ```php <?php use think\facade\App; // 注册HelloPlugin插件 App::register('plugins\HelloPlugin\Plugin'); ``` 5. 使用插件 在应用中可以使用插件，例如访问HelloPlugin插件的路由。 ```php <?php use think\facade\Route; // 访问HelloPlugin插件的路由 Route::get('/hello-plugin', 'plugins\HelloPlugin\Hello@index'); ``` 这样，我们就完成了一个简单的TP6插件Demo。当我们访问/hello路由时，就可以看到插件的输出内容了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值