码迷,mamicode.com
首页 > Web开发 > 详细

jsJqGrid

时间:2017-11-10 20:24:43      阅读:285      评论:0      收藏:0      [点我收藏+]

标签:icons   alt   llb   tooltip   repeat   column   整数   --   eset   

/*展开收起*/
$(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中,显示出来--> */
    }
}

 

jsJqGrid

标签:icons   alt   llb   tooltip   repeat   column   整数   --   eset   

原文地址:http://www.cnblogs.com/slowcity/p/7815798.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!