jqGrid構造下拉表格控件 dropDownGrid -ace Admin

jqGrid構造下拉表格控件 dropDownGrid -ace Admin

本文地址：http://blog.csdn.net/zrk1000/article/details/46560791

提出問題

使用ace Admin開發過程中使用modal（模態框）彈出表單，輸入框需要從數據庫其他表中取值填充，一般情況下select或更方便的chosen就可以；若需要在下拉中顯示多列，chosen就滿足不，若在modal中再彈modal會影響底層modal的滾動事件，多層modal不是好的選擇；能提供下拉表格的控件目前知道有兩款JQuery MagicGrid 和jquery combogrid，在往ace中整合過程中，樣式衝突無法完全解決；

解決問題

折騰半天還是自己寫個來的簡單，由於在ace已集成jqgrid，下拉grid直接使用jqgrid表格，結合bootstrap的dropdown來完成,樣式使用了ace.css，當然還有bootstrap的樣式；提供自定義多列查詢，針對一般需求夠用了，在modal中的使用效果圖如下

調用方式 - html代碼：

<div class="form-group">
    <label class="col-sm-2 control-label no-padding-right" >pressImg:</label>
    <div class="col-sm-10">
        <div class="dropdown input-group col-xs-10 col-sm-5" id="myDropdown"  >
            <input type="hidden" value="" name="">
            <input type="text" class="dropdown-toggle" data-toggle="dropdown" style="width:215px" placeholder="" name="" value="" id="" />
        </div>
    </div>
</div>

調用方式 - js代碼：

$("#myDropdown"). dropDownGrid({
    jqgridOp:{
        //caption:"資源選擇列表",
        rowNum:5,
        rowList:[5,10],
        url : "${ctx}/***",
        colNames:['','中文名稱','路徑','類型','資源用途分類','客戶'],
        colModel:[
            {name:'id',index:'id', width:10, sorttype:"int", editable: false, hidden:true},
            {name:'chineseName',index:'chineseName',width:100, editable:false,search:true,searchoptions:{sopt:['like']},
                formatter:function(cellvalue, options, cell){
                    cellvalue = "<a href='resourceView?id="+cell.id+"&type=page' target='_blank'>"+cellvalue+"</a>";
                    return cellvalue;
                },
                unformat:function(cellvalue, options, cell){
                    return $('a', cell).text();
                }},
            {name:'filePath',index:'filePath', width:20,editable: false,search:false,hidden:true},
            {name:'dataTypeValue',index:'dataTypeValue', width:20,editable: false,search:false},
            {name:'useType.name',index:'useType.name', width:30,editable: false,search:true,searchoptions:{sopt:['like']}},
            {name:'customer.name',index:'customer.name', width:20, editable: false,search:true,searchoptions:{sopt:['like']}}
        ]
    },
    dropDown:{
        keyCol:"filePath",
        viewCol:"chineseName",
        search:true,
        extendBtn:true,
        extendBtnIcon:icon,
        extendBtnFunction:function(keyValue,viewValue){
            if(keyValue){
                //預覽圖片
            }
        },
        params:{dataTypeValue:dataTypeValue}//默認參數,jqgridOp.url請求時的參數
    }
});

代碼說明

options.jqgridOp 定義表格，完全按照jqgrid的api定義
options.dropDown 定義下拉表格選擇回填的字段、清空輸入框按鈕及擴展按鈕
例：
dropDown:{
    keyCol:"",//回填key字段
    viewCol:"",//回填顯示字段
    search:true,//是否顯示搜索框
    params:{},//默認參數
    showRefresh:false,//顯示下拉表格時是否刷新表格
    extendBtn:false,//擴展按鈕
    extendBtnIcon:"fa fa-picture-o bigger-110",//擴展按鈕樣式
    extendBtnFunction:function(keyValue,viewValue){}//擴展按鈕事件
}

loadComplete中重寫了分頁按鈕的樣式

//去除jqgrid橫向滾動條
grid_selector.closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "hidden" });

//擴展按鈕回調
if(options.dropDown.extendBtn){
     $("#extendbtn_"+randomId).bind("click",function(){
            options.dropDown.extendBtnFunction(
                $this.children("input[type='hidden']").attr("value"),
                $this.children("input[type='text']").attr("value")
            );
     });
 } 
//避免表格點擊即隱藏
$this.find(".dropdown-menu").click(function(e) {
     e.stopPropagation();
});

代碼清單

/*
 * dropDownGrid v1.0
 * author: zrk
 * need jquery.jqGrid.js bootstrap.min.js
 */
(function($) {
    $.fn.dropDownGrid = function(config){
        var options = $.extend(true,{
                jqgridOp:{
                    viewrecords:true,
                    url : "", 
                    colNames:[],
                    colModel:[]
                },
                dropDown:{
                    keyCol:"",
                    viewCol:"",
                    search:true,
                    params:{},
                    showRefresh:false,
                    extendBtn:false,
                    extendBtnIcon:"fa fa-picture-o bigger-110",
                    extendBtnFunction:function(keyValue,viewValue){}
                }
            },config);
        var $this = $(this);
        if($this.children("div[class='dropdown-menu']").innerHTML){
            return;
        }
        var randomId = Math.round(Math.random()*10000);
        var addonV = '<span id="clearbtn_'+randomId+'" class="input-group-addon"><i class="glyphicon glyphicon-remove"></i></span>';
        if(options.dropDown.extendBtn){
            addonV += '<span id="extendbtn_'+randomId+'" class="input-group-addon"><i class="'+options.dropDown.extendBtnIcon+'"></i></span>';
        }

        var appendV =   addonV+'<div class="dropdown-menu" ><table id="grid_'+randomId+'"></table><div id="pager_'+randomId+'"></div></div>';
        $this.append(appendV);
        var pager_selector = $this.children("div[class='dropdown-menu']").children("div");
        var grid_selector  = $this.children("div[class='dropdown-menu']").children("table");
        grid_selector.jqGrid({
            jsonReader : {
                root: 'rows',
                page: 'pageNo',
                total: 'totalPages',
            },
            height:options.jqgridOp.height||"auto",
            width:options.jqgridOp.width||"600",
            viewrecords:options.jqgridOp.viewrecords,
            rowNum:options.jqgridOp.rowNum||10,
            rowList:options.jqgridOp.rowList||[10,20,30],
            pager : pager_selector,
            rownumbers: true, 
            rownumWidth: 40,
            caption:options.jqgridOp.caption,
            url : options.jqgridOp.url, 
            postData:{},
            contentType : 'application/json',  
            mtype : "GET",  
            datatype : 'json',
            beforeRequest:function(){
                grid_selector.jqGrid("setGridParam", { postData: options.dropDown.params });
            },
            onSelectRow:function(id){
                $this.children("input[type='hidden']").attr("value",grid_selector.getCell(id,options.dropDown.keyCol));
                $this.children("input[type='text']").attr("value",grid_selector.getCell(id,options.dropDown.viewCol));
            },
            colNames:options.jqgridOp.colNames,
            colModel:options.jqgridOp.colModel,
            loadComplete : function() {
                setTimeout(function(){
                    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]);
                    })
                }, 0);
            }
        });

        if(options.dropDown.search){
            grid_selector.jqGrid('filterToolbar',{searchOnEnter: true});
        }
        if(options.dropDown.showRefresh){
            $this.on('show.bs.dropdown', function () {
                grid_selector.trigger("reloadGrid");
            });
        }
        $this.find(".dropdown-menu").click(function(e) {
            e.stopPropagation();
        });
        grid_selector.closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "hidden" });

        $("#clearbtn_"+randomId).bind("click",function(){
            $this.children("input[type='hidden']").attr("value","");
            $this.children("input[type='text']").attr("value","");
        });
        if(options.dropDown.extendBtn){
            $("#extendbtn_"+randomId).bind("click",function(){
                options.dropDown.extendBtnFunction($this.children("input[type='hidden']").attr("value"),$this.children("input[type='text']").attr("value"));
            });
        }       


    };
})(jQuery);

本文地址：http://blog.csdn.net/zrk1000/article/details/46560791