jqGrid構造下拉表コントロールdropDownGrid-ace Admin

jqGrid構造下拉表コントロールdropDownGrid-ace Admin
この記事のアドレス:http://blog.csdn.net/zrk1000/article/details/46560791
質問を発する
ace Adminを使って開発中にmodalを使ってフォームをイジェクトします.入力枠はデータベースの他のテーブルから値を取って充填する必要があります.一般的にselectやより便利なcheconでいいです.下に複数の列を表示する必要があれば、チョセンは満足できません.modalでmodalを弾くと、下にあるmodalのスクロールイベントに影響します.多層modalは良い選択ではありません.プルダウンテーブルを提供できるコントロールは現在、JQuery MagicGridとjquery compgridが二つあると知っています.このような形の衝突は完全に解決できません.
問題を解決する
長い間苦労しても自分で書いたのは簡単です.スペースでjqgridを集めたので、直接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