1. 程式人生 > >ComboGrid(資料表格下拉框)[分頁+搜尋+多選]

ComboGrid(資料表格下拉框)[分頁+搜尋+多選]

注意:後臺控制層接收該控制元件的引數名必須是 

//likeName:根據需求可有可無需要模糊條件查詢時新增
(String likeName,Integer page, Integer rows)

//=================jsp==============start=====

//控制元件標籤宣告
哈嘍:<input id="cc"/>  
<div class="AA" id="tbPros" style="float:left;padding-left:15px">
     <div style="padding-top:4px;">
         <!--搜尋combogrid下拉標籤定義 根據需求如不需下拉則在js中不用將其轉為combogrid控制元件-->  
         xx:<input   id="updatehospitalCodeadd"   style="width: 300px;"/>
         <!--標籤方式定義linkbutton按鈕-->
         <a href="javascript:void(0)" id="addProsadd" data-options="iconCls:'glyphicon-ok 
         icon-green'" style="width: 100px;height: 24px;" onclick="search()">按鈕名稱</a>
    </div>
</div>

//=================jsp==============end======

//js動態封裝(因為後臺新增和修改可能會用到同一個ComboGrid控制元件)

//呼叫示例:addDoctorDetil("#原生input標籤id","#搜尋下拉或按鈕Div的id");
function addDoctorDetil(combogridId,toolbarId) {
    $(combogridId).combogrid({
        multiple: true,//false:單選  true:多選
        idField: 'id',//ID欄位名稱。
        textField: 'dName',//要顯示在文字框中的文字欄位
        url: base + "/operating/getByDoctor",//url
        method: 'post',//請求方式
        queryParams : {//在請求遠端資料的時候傳送額外的引數
            likeName : ''
        },
        columns: [[
            {field:'ck',checkbox:true,width:40},//複選框
            {field:'id',title:'對應的欄位說明'},
            {field:'dName',title:'對應的欄位說明'},
            {field:'price',title:'對應的欄位說明'}
        ]],
        editable : false,//不可編輯
        fitColumns: true,//真正的自動展開/收縮列的大小,以適應網格的寬度,防止水平滾動
        panelWidth:'390px',
        panelHeight:'412px',
        pagination:true,//如果為true,則在DataGrid控制元件底部顯示分頁工具欄
        pageSize:10,//在設定分頁屬性的時候初始化頁面大小。
        toolbar:toolbarId,//頂部工具欄的DataGrid面板
    });
}

//=================js==============start=====//將宣告的標籤通過js程式碼動態轉為ComboGrid下拉控制元件

//=================js==============end=====