jsJqGrid

最新推荐文章于 2024-04-30 19:40:07 发布
最新推荐文章于 2024-04-30 19:40:07 发布
阅读量113 收藏
点赞数
文章标签： javascript json ViewUI
原文链接：http://www.cnblogs.com/slowcity/p/7815798.html
版权 
/*展开收起*/
$(function() {
    initGridTable();
});
function change() {
    var flag = $("#searchTitle").attr("flag");
    if (flag == 'show') {
        $("#searchDiv").slideUp();
        $("#searchTitle > span:first").text("展开");
        $("#searchTitle").find("i").removeClass("fa-minus").addClass("fa-plus")
                .end().attr("flag", "hide");
    } else {
        $("#searchDiv").slideDown();
        $("#searchTitle > span:first").text("收起");
        $("#searchTitle").find("i").removeClass("fa-plus").addClass("fa-minus")
                .end().attr("flag", "show");
    }
};

function initGridTable() {
    // start grid table
    var grid_selector = "#grid-table-period";
    var pager_selector = "#grid-pager";

    // resize to fit page size
    $(window).unbind("resize.jqGrid");
    $(window).on('resize.jqGrid', function() {
        /*
         * if(window.screen.width <= 1366){
         * $(grid_selector).jqGrid('setGridWidth',
         * $(".page-content").width()).jqGrid('setGridHeight',
         * $(window).height()-305); }else {
         * $(grid_selector).jqGrid('setGridWidth',
         * $(".page-content").width()).jqGrid('setGridHeight',
         * $(window).height()-340); }
         */
        var tableHeight = 0;
        if (window.screen.width <= 1366) {
            tableHeight = $(window).height() - 300;
        } else {
            tableHeight = $(window).height() - 340;
        }
        $(grid_selector).jqGrid('setGridWidth', $(".page-content").width());
        $(grid_selector).parents('div.ui-jqgrid-bdiv').css({
            'height' : 'auto',
            'min-height' : tableHeight + 'px'
        });
    })
    // resize on sidebar collapse/expand
    var parent_column = $(grid_selector).closest('[class*="col-"]');
    $(document).unbind("settings.ace.jqGrid");
    $(document).on(
            'settings.ace.jqGrid',
            function(ev, event_name, collapsed) {
                if (event_name === 'sidebar_collapsed'
                        || event_name === 'main_container_fixed') {
                    // setTimeout is for webkit only to give time for DOM
                    // changes and then redraw!!!
                    setTimeout(function() {
                        $(grid_selector).jqGrid('setGridWidth',
                                parent_column.width());
                    }, 0);
                }
            })

    $(grid_selector).jqGrid(
            {
                // direction: "rtl",
                url : webroot + "interactive/queryAnchorMonitor.htm",
                datatype : "json",
                /* height: 350, */
                colNames : [ "ID", "主播ID", "主播昵称", "禁播状态", "禁播期限", "禁播原因",
                        "操作人", "操作时间" ],
                colModel : [ {
                    name : 'id',
                    index : 'id',
                    width : 60,
                    sortable : true
                }, {
                    name : 'anchorId',
                    index : 'anchorId',
                    width : 60,
                    sortable : true
                }, {
                    name : 'anchorName',
                    index : 'anchorName',
                    width : 60,
                    sortable : true
                },
                /*
                 * { name : 'limitStatus', index : 'limitStatus', hidden :
                 * false, editable : true, },
                 */
                {
                    name : 'limitStatus',
                    index : 'limitStatus',
                    width : 60,
                    sortable : true,
                    formatter : function(cellvalue, options, rowObject) {
                        if (cellvalue == '0') {
                            return "正常直播";
                        } else if (cellvalue == '1') {
                            return "禁播";
                        } else if (cellvalue == '2') {
                            return "永久禁播";
                        } else {
                            return "未知";
                        }
                    }
                }, {
                    name : 'limitTime',
                    index : 'limitTime',
                    width : 60,
                    sortable : true
                }, {
                    name : 'operatorReason',
                    index : 'operatorReason',
                    width : 60,
                    sortable : true,
                    width: 100, align: "center", sortable: false, editable: false, formatter:  function(value,row,index){return '<img src= pages/interactive/img/3.png />'},                     
                     
                }, {
                    name : 'operator',
                    index : 'operator',
                    width : 60,
                    sortable : true,
                    align:"center",
                    /*     */ editable:true,edittype:'select',editoptions:{value:{1:'正常', 2:'维修', 3:'常用'}},
                     
                }, {
                    name : 'operatorTime',
                    index : 'operatorTime',
                    width : 60,
                    sortable : true,
                } ],
                cellEdit: true,
                cellsubmit: "clientArray",
                sortable : true,
                viewrecords : true,
                rowNum : 20,
                rowList : [ 20, 100, 500, 1000 ],
                pager : pager_selector,
                
            
                altRows : true,
                // toppager: true,
                jsonReader : {
                    total : 'total',
                    records : 'records',
                    root : 'rows',
                    repeatitems : true
                },
                /*pagepos:left,*/
                multiselect : true,   //复选框
                // multikey: "ctrlKey",
                multiboxonly : true,
                 // recordpos: 'left',   控制记录条数放在页面的位置，默认right
                 //viewrecords: false,  隐藏记录条数
                /* ondblClickRow: function (id) {  
                         
                           jQuery('#grid-table-period').jqGrid('restoreRow', lastsel);  
                           jQuery('#grid-table-period').jqGrid('editRow', id, true);  
                           lastsel = id;  
                         
                   },  
                   editurl: "JqGridHandler.ashx" ,//这个文件需要有，但里面无需写任何处理代码 
*/                loadComplete : function(data) {
                    var table = this;
                    var pageNow = $(grid_selector).jqGrid('getGridParam',
                            'page');// 当前页
                    var totalPage = data.total;// 总页数
                    if (totalPage == 0) {
                        $(".ui-pg-input").val(0);
                        $("td.ui-corner-all").addClass("ui-state-disabled");
                    } else {
                        if (pageNow > totalPage) {
                            var pageInfo = ($(".ui-pg-selbox").val()
                                    * (totalPage - 1) + 1)
                                    + " - "
                                    + data.records
                                    + "\u3000共  "
                                    + data.records + " 条";
                            if (totalPage == 1) {
                                $("td.ui-corner-all").addClass(
                                        "ui-state-disabled");
                            }
                            $(".ui-pg-input").val(totalPage);
                            $(grid_selector).jqGrid('setGridParam', {
                                page : totalPage
                            });
                            $("#grid-pager_right > div").text(pageInfo);
                            $("#next_grid-pager").addClass("ui-state-disabled")
                                    .next().addClass("ui-state-disabled");
                        }
                    }

                    setTimeout(function() {
                        updatePagerIcons(table);
                        enableTooltips(table);
                    }, 0);
                },
                editurl : "/dummy.html",// nothing is saved
            });
    $(window).triggerHandler('resize.jqGrid');// trigger window resize to make
                                                // the grid get the correct size
    //隐藏员工列表标题
     $("#grid-table-period").closest(".ui-jqgrid-view").find("div.ui-jqgrid-titlebar").hide();
    //隐藏员工列表表头
    //$("#grid-table-period").closest(".ui-jqgrid-view").find("div.ui-jqgrid-hdiv").remove();
     
    $("#grid-table-period").jqGrid('navGrid',
        '#grid-pager'),{ 
            /*add:"true" ,
            edit:"true",
            del:"true",
            search:"true",
            searchtext:"查找" ,
            edittext:"编辑",
            deltext:"删除",
            addtext:"增加",*/
        };
        
     
     
     
    function updatePagerIcons(table) {
        var replacement = {
            'ui-icon-seek-first' : 'ace-icon fa fa-angle-double-left bigger-140',
            'ui-icon-seek-prev' : 'ace-icon fa fa-angle-left bigger-140',
            'ui-icon-seek-next' : 'ace-icon fa fa-angle-right bigger-140',
            'ui-icon-seek-end' : 'ace-icon fa fa-angle-double-right bigger-140'
        };
        $('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon')
                .each(
                        function() {
                            var icon = $(this);
                            var $class = $.trim(icon.attr('class').replace(
                                    'ui-icon', ''));

                            if ($class in replacement)
                                icon.attr('class', 'ui-icon '
                                        + replacement[$class]);
                        })
    }
    function enableTooltips(table) {
        $('.navtable .ui-pg-button').tooltip({
            container : 'body'
        });
        $(table).find('.ui-pg-div').tooltip({
            container : 'body'
        });
    }
    $(document).one('ajaxloadstart.page', function(e) {
        $(grid_selector).jqGrid('GridUnload');
        $('.ui-jqdialog').remove();
    });
}

var img;


 



/* 删除按钮 */

function delAnchorMonitor() {
        var selectedIds = $("#grid-table-period").jqGrid("getGridParam", "selarrrow"); //返回选中多行ids
        if (selectedIds == '' || selectedIds == null) {
            alertmsg("warning",$("#sys-error-selectOne").val());
        } else if (selectedIds.length >= 1) {
            
            Lobibox.confirm({
                title: $("#material-alert").val(),
                msg: $("#interactive-confirmDel").val(),
                callback: function ($this, type, eve) {
                    if(type == "yes"){
                        var ids = "";
                        for (var i=0; i<selectedIds.length; i++) {
                            var id = selectedIds[i];
                            var rowData = $('#grid-table-period').getRowData(id);
                            var inteId = rowData.id;
                            ids = ids +inteId + ",";
                        }
                         
                        console.log(ids);
                        var data = {"inteIds":ids};
                        $.post(webroot + "interactive/delAnchorMonitor.htm",
                            data,
                            function(data){
                                if(data.success == true){
                                    $("#grid-table-period").jqGrid('setGridParam',{ 
                                        page:1,
                                        mtype:"post"
                                    }).trigger("reloadGrid"); //重新载入 
                                    alertmsg("success",$("#interactive-del-success").val());
                                }else{
                                    alertmsg("error",$("#interactive-del-fail").val());
                                }
                            }
                        );
                    }            
                }
            });
        }  
    } 

 
/* 编辑按键 */
function editAnchors() {
      
    var selectedIds = $("#grid-table-period").jqGrid("getGridParam",
            "selarrrow"); // 返回选中多行ids
    for (var i = 0; i < selectedIds.length; i++) {
        console.log(selectedIds[i]);
    }
    if (selectedIds == '' || selectedIds == null) {
        alertmsg("warning", $("#sys-error-selectOne").val());
    } else if (selectedIds.length > 1) {
        alertmsg("warning", $("#sys-error-onlyOne").val());
    } else {
        var id = $('#grid-table-period').jqGrid("getCell", selectedIds, "id");
        var anchorName = $('#grid-table-period').jqGrid("getCell", selectedIds,
                "anchorName");
        var anchorId = $('#grid-table-period').jqGrid("getCell", selectedIds,
                "anchorId");
        var select = $('#grid-table-period').jqGrid("getCell", selectedIds,
                "limitStatus");
        $("#Id").val(id);
        $("#anchorId").val(anchorId);
        $("#anchorName").val(anchorName);
        $("#editAnchorsModal").modal("show");
        $("#select").val(caseChange(select));
        $("#limitDay").hide();
        $("#limitReason").show();
         if (caseChange(select) == 1) {
            $("#limitDay").show();    
        };    
        if (caseChange(select) == 0) {
            $("#limitReason").hide();    
        };
    }
};

function caseChange(e) {
    if (e == "正常直播") {
        return 0;
    } else if (e == "禁播") {
        return 1;
    } else if (e == "永久禁播") {
        return 2;
    } else {
        return 0;
    }
    ;
}

/* 保存修改 */
function editSaveAnchorMonitor() {
    var selectedIds = $("#grid-table-period").jqGrid("getGridParam",
            "selarrrow"); // 返回选中多行ids
    var Id = $("#Id").val();
    var anchcorName = $("#anchorName").val();
    var anchcorId = $("#anchorId").val();
    var limitStatus = $("#select option:selected").val();
    var limitTime = $("#limitTime").val();
    var operatorReason=$("#limitReasonText").val();
    if (limitStatus == 1) {
        if (limitTime == "" || limitTime == null || limitTime == undefined) {
            alert("天数不能为空，请重新输入");
            return;
        }
        ;
    }
    ;
    // 将这三个值传到action，经后台处理后返回到前台
    var jsonData = {
        'id' : Id,
        'anchcorName' : anchcorName,
        'anchcorId' : anchcorId,
        'limitStatus' : limitStatus,
        'limitTime' : limitTime,
        'operatorReason':operatorReason,
    };
    $.ajax({
        type : "post",
        url : webroot + "interactive/saveAnchorMonitor.htm",
        data : jsonData,
        success : function(data) {
            if (data.msg == true) {
                alertmsg("success", "编辑成功");
                $("#grid-table-period").jqGrid('setGridParam', {
                    page : 1,
                    mtype : "post"
                }).trigger("reloadGrid"); // 重新载入
            } else {
                alertmsg("error", "编辑失败");
            }
        }
    });
    $("#editAnchorsModal").modal("hide");
    $('#saveEditForm')[0].reset();
    setBtnDisable(e)// set search button disabled and remove the disabled
};

/* 根据主播ID或名字查询主播信息 */
function searchAnchorMonitor() {
    /* var anchorTableId =document.getElementById("anchorTableId") */
    var anchorTableId = $("#anchorTableId").val();
    var anchorName = $("#anthorName").val();
    var limintStatus = $("#searchOption").val();

    if (isNaN(anchorTableId)) {
        alertmsg("warning", "ID必须是数字！");
        return;
    }
    var jsonData = {
        'anchorTableId' : anchorTableId,
        'anchorName' : anchorName,
        'limintStatus' : limintStatus
    };
    $('#grid-table-period').jqGrid('setGridParam', {
        url : webroot + "interactive/searchAnchorMonitor.htm",
        postData : jsonData,
        page : 1,
        mtype : "post"
    }).trigger("reloadGrid");

    setBtnDisable(e)// set search button disabled and remove the disabled
    // attribute a few seconds later
    alert(jsonData);

}

function resetAnchorMonitor() {
    $("#anchorTableId").val("");
    $("#anthorName").val("");
    $("#searchOption").val("");
    var jsonData = null;
    $('#grid-table-period').jqGrid('setGridParam', {
        url : webroot + "interactive/searchAnchorMonitor.htm",
        postData : jsonData,
        page : 1,
        mtype : "post"
    }).trigger("reloadGrid");
};
/* 禁播天数的onchange事件 */
function showlimitDay() {
    var flag = $("#select").val();        
    if (flag == 1) {
        $("#limitDay").show();
        $("#limitReason").show();
    };
    if(flag==0){
        $("#limitReason").hide();
        $("#limitDay").hide();
    };
    if(flag==2){
        $("#limitReason").show();
        $("#limitDay").hide();
    }
};

/* 禁播原因的onchange事件 */
function limitReason() {
    var flag = $("#select").val();
    if (flag == 0) {
        $("#limitReason").hide();

    } else {
        $("#limitReason").show();
    }
};



function checkInteger() {
    var limitTime = $("#limitTime").val();
    var reg = /^[1-9]\d*$/;
    if (reg.test(limitTime)) {
    } else {
        alert("天数须是正整数，请重新输入");
        $("#limitTime").val("");
        return;
    }
};

/* 禁言禁播的二级联动 */
function move() {
    var s1 = document.getElementById("s1");
    var s2 = document.getElementById("s2");
    /* <!-- 获取一级和二级的属性--> */
    var add;
    if (s1.value == "0") {
        add = null;
        $("#s2").hide();
        /* <!--比对value值，实现对应二级text值的动态生成--> */
    } else if (s1.value == "1") {
        $("#s2").show();
        add = new Array("1h", "2h", "3h", "5h", "10h");
        /* <!--比对value值，实现对应二级text值的动态生成--> */
    } else if (s1.value == "2") {
        $("#s2").show();
        add = new Array("1min", "20min", "60min", "180min", "240min");
        /* <!--比对value值，实现对应二级text值的动态生成--> */
    }
    s2.length = 0;
    for (var i = 0; i < add.length; i++) {
        var ss = new Option();
        ss.text = add[i].split()[0];
        s2.add(ss);
        /* <!--把text值添加到二级select中，显示出来--> */
    }
}

 

转载于:https://www.cnblogs.com/slowcity/p/7815798.html

weixin_30615767
关注
Js插件之JqGrid的使用
qq_34368587的博客
03-26 7903
简介：jqGrid 是一个用来显示网格数据的jQuery插件，通过使用jqGrid可以轻松实现前端页面与后台数据的ajax异步通信。官网地址：http://blog.mn886.net/jqGrid/示例：需要引入的文件：css:ui.jqgrid.cssjs:jquery-2.0.3.min.jsjquery.jqGrid.min.jsgrid.locale-en.jsdemo:页面加载：$(f...
jqGrid 实现表格导出Excel功能
旭东怪的博客
09-28 2734
1、实现代码 /** * * function jqgridtoExcel (Table,Tal,fileName) * @param Table 表头table的父div-父div-父div * @param Tal jqgrid的tableid * @param filename Excel文件名称 * example：jqgirdtpExcel($("#gview_group-report4"),$("#group-report4"),fileName); * **/ (function.
JavaScript(三)：JqGrid 属性
weixin_33774883的博客
06-25 149
1. jqgrid在显示数据时，设置jqgrid的高度随着行数的变化而变化，如果行数多于页面的高度时，则自动出现滚动条。 其实很简单有一个属性何以直接设置。如下： height:"100%", 转载于:https://www.cnblogs.com/Jenny90/p/3578512.html...
JavaScript 学习（二）：JqGrid
weixin_34226182的博客
06-25 340
在codeproject中看到这篇文章，写得很好，适合我这种入门级别的小菜鸟。 地址：http://www.codeproject.com/Articles/609442/Using-JqGrid-in-ASP-NET Introduction Hi folks, I am back with another tip of Iceberg. The responsibility to fi...
jqGrid用法汇总(全经典)
最新发布
男神的专栏
04-30 2643
rowid：当前行id；设置该列是否允许排序，在列的属性里设置sortable，同时对于不同的数据类型，也需要设置其相应的排序类型sorttype，类型有int/integer 整型,float/number/currency 浮点型，date 日期，text 文本，function 定义函数来实现自定的排序规则。统计时利用getCol方法，第一个参数为colMode的name值，第二个设为false，否则会返回一个数组而不是但一个数据，第三个是设置统计方式，有’sum’,‘avg’和’count’。
js插件---jqGrid插件如何使用
weixin_34261415的博客
08-26 204
js插件---jqGrid插件如何使用 一、总结 一句话总结：jqdrid还是依赖加js初始化的方式，很多时候插件的问题一般都是引入的css和js的问题，jqgrid里面遇到的问题就是下载包有一些js和css没有，因为是依赖而不属于本身 1、直接看插件官方文档好还是看中介（amazeui，bootstrap等）的文档好？ 有些时候直接官方文档可能更加方便 有些时候则是这些中介的文档...
jqGrid demo （完整版）
10-28
jqGrid 是一个基于 jQuery 的数据网格插件，用于在网页上展示和操作大量结构化数据。这个"jqGrid demo （完整版）"提供了一个全面的示例，可以帮助开发者更好地理解和应用 jqGrid，无论是在 PHP 或 JSP 环境中。 1....
jquery.jqGrid.groupHeader-0.2.1.js
10-15
jqGrid没有setComplexGroupHeaders方法，使用此插件实现三级分组表头功能
jquery.jqGrid.js
08-25
jquery.jqGrid.js，jqGrid表格专用JS文件，缺失备用，即下即用。
JavaScript、jqGrid总结
iilegend的博客
08-25 478
1、获取选中行ID selIDs=$("#grid").getGridParam("selarrrow");//selIDs是一个选中行ID的数组selectID=$("#grid").getGridParam("selrow");//这只能获得选中一行的ID，如果表格选中 多行，selrow 这个函数，只能获得选中的最后一行的ID，这里需要主要selarrrow与selrow两个函
jqGrid基本语法及使用
汉堡请不要欺负面条
08-03 1705
一.介绍 (1).介绍 首先对Jqgrid网格插件做个简要的说明。在众多的表格插件中，Jqgrid的特点是非常鲜明的。     特点如下:     1.完整的表格呈现与运算功能，包含换页、栏位排序、grouping、新增、修改及删除资料等功能。     2.自定义的工具列。     3.预设的Navigator工具列，可以很容易的使用新增、删除、编辑、检视及搜寻等功能。     4.完整的分页...
jqGrid使用一二例~
weixin_45542303的博客
12-25 822
jqgrid使用小结
jqGrid选项配置
showbo的专栏
10-29 6216
jqGrid选项配置属性默认从静态变量$.jgrid.defaults中加载。英文版本的属性默认配置如下。本人下载的jqGrid4.4.0示例中暂时不支持中文语言的语言包，所以要配置为中文语言，只能通过重写下面表格列出的属性来实现。语言配置文件在demo目录js/i18n这个文件夹下，要改为其他语言加载对应的js语言配置文件即可。 －收缩JavaScript代码 $.jgrid={
JqGrid 使用方法详解 一
weixin_71588037的博客
08-30 4826
JqGrid 使用方法详解 一
Jqgrid 详解
热门推荐
qq_27009517的博客
05-19 1万+
Jqgrid入门-显示基本的表格(一) 首先对Jqgrid网格插件做个简要的说明。在众多的表格插件中，Jqgrid的特点是非常鲜明的。 特点如下: 完整的表格呈现与运算功能，包含换页、栏位排序、grouping、新增、修改及删除资料等功能。 自定义的工具列。 预设的Navigator工具列，可以很容易的使用新增、删除、编辑、检视及搜寻等功能。 完整的分页功能。 按下任一栏位的标头，皆可以该栏位为排序项目。无论是升序或降序皆可。 预设的action formatter，可以快...
jqGrid学习笔记（一）
weixin_30814223的博客
11-11 313
jqGrid 是一个用来显示网格数据的jQuery插件，通过使用jqGrid可以轻松实现前端页面与后台数据的ajax异步通信。文档比较全面，其官方网址为：http://www.trirand.com。 一、jqGrid特性： 基于jquery UI主题，开发者可以根据客户要求更换不同的主题。 兼容目前所有流行的web浏览器。 Ajax分页，可以控制每页显示的记录数。 支持X...
jqGrid的使用总结
hykkingking的博客
03-13 1170
jqGrid的使用总结 jqGrid是一个基于Jquey的表格控件，jqGrid以.ajax的方法实现服务器后台通信，因此利用jqGrid可以快速实现从服务器后台获取数据并在前端展示出来。 如何使用 jqGrid Demo在线文档简单粗暴，上面可以看到每个参数、方法的含义，而且从配置项开始、到使用、到特定需求的设置都进行了示例演示，很好入门，使用也方便，同时可以根据自己的需要进行一些修改。 下面是...
JavaScript jqGrid自定义表格底部导航+自定义文本搜索框实现
chuangxin的专栏
01-03 2305
本文探讨了jqGrid自定义表格底部导航及自定义文本框搜索实现，涉及jqGrid的列模型、数据加载、自定义底部导航、自定义文本搜索框、jqGrid方法扩展等知识点。同时为了大家方便使用案例，本文css、js资源都使用了cdn资源。
jqgrid使用步骤及说明
lbxhappy的专栏
05-17 436
                                      jqgrid使用说明   jqGrid 是一个用来显示网格数据的jQuery插件，可以动态的对数据网格的数据进行添加、删除、修改、查询、排序、拖拽等操作，数据源可以是json、xml   官网下载地址：http://www.trirand.com/blog/?page_id=6 官网文档：http://ww...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值