說明:目前使用easyui combobox多選屬性,綁定的數據源是來自datagrid的表頭的列名及顯示名稱ide
處理方法:ui
//獲取凍結的數據源並返回key,value格式數據 var GetFrozeData = function (gridStr, isFroze) { //獲取全部未凍結列數據 var cols = $(gridStr).datagrid('getColumnFields', isFroze); var array = []; for (var i in cols) { //獲取每一列的列名對象 var col = $(gridStr).datagrid("getColumnOption", cols[i]); //聲明對象 var obj = new Object(); obj["value"] = cols[i]; obj["text"] = col.title.trim(); //追加對象 array.push(obj); } return array; } //加載combobox數據源 var LoadComboData = function (gridStr, comboStr, isFroze) { //獲取凍結或非凍結列名,轉成key,val 格式 var comboData = GetFrozeData(gridStr,isFroze); //從新綁定combo數據源 $(comboStr).combobox({ data: comboData }); //$(comboStr).combobox('loadData', comboData); }
最後返回處理結果spa
頁面上調用:.net
<div> <div id="setDiv" style="margin-top: 25px;"> <a id="btnText" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" data-bind="click:showOrHideClick">高級設置</a> </div> <div class="clear"></div> <div id="frozeDiv"> <div class="grid_1 lbl">凍結列:</div> <div class="grid_2 val"><input type="text" id="frozeCols" data-bind="comboboxValue:form.FrozeColoumn" data-options="multiple:true" class="z-txt easyui-combobox " /></div> <div class="clear"></div> <a id="a_search" href="#" class="buttonHuge button-blue" style="margin:5px 1%;" data-bind="click:saveSetClick">保存設置</a> </div> </div>
調用加載js方法:code
//顯示或隱藏div事件 var showOrHideClick = function(){ //取到linkbutton按鈕的顯示值 if($("#btnText").linkbutton("options").text == "高級設置"){ //更換linkbutton圖標,顯示值 $('#btnText').linkbutton({ iconCls: 'icon-remove' }); $("#btnText").linkbutton({text: '隱藏'}); // $('#frozeDiv').attr("style","display:none;"); //隱藏div } else{ //更換linkbutton圖標 $('#btnText').linkbutton({ iconCls: 'icon-add' }); $("#btnText").linkbutton({text: '高級設置'}); // $('#frozeDiv').attr("style","display:block;"); //顯示div } //顯示或隱藏div的jq事件 $("#frozeDiv").toggle(500); //加載combobox的數據源 LoadComboData("#gridlist","#frozeCols",false); };
頁面效果以下:orm
參考網址:對象
https://www.oschina.net/question/1993919_166055blog