ComboGrid（数据表格下拉框）[分页+搜索+多选]

注意:1.后台控制层接收该控件的参数名必须是

//likeName:根据需求可有可无需要模糊条件查询时添加
(String likeName,Integer page, Integer rows)

注意:2.后台控制层响应回来的数据必须键为rows(数据)和total（数据条数）

Map map=new HashMap();
map.put("rows",xxx);
map.put("total",xxx);

//=================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==============start=====//将声明的标签通过js代码动态转为ComboGrid下拉控件

$(function () {//页面加载完成之后
    //调用封装的ComboGrid函数
    addDoctorDetil("#doctor","#tbPros");//修改
    addDoctorDetil("#doctoradd","#tbProsadd");//添加
    searchxxx("#xxxx","#xxxx")//搜索下拉
}

//js动态封装(因为后台添加和修改可能会用到同一个ComboGrid控件并且columns列属性相同为了避免重复代码)

//调用示例: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面板
    });
}

//搜索ComboGrid下拉函数封装(添加和修改的combogridId原生input标签标签不同列属性相同所以可以封装combogrid下拉函数避免重复)

//调用示例:searchxxx("#原生input标签id","#搜索下拉或按钮Div的id");
function searchxxx(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面板
        onChange : function(newValue, oldValue){//newValue是idField的值
            //当用户选择搜索下拉框后重载combogrid并携带参数完成搜索
            $('#xxx').combogrid("grid").datagrid("reload",{ likeName: newValue});
        }
    });
}

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

ComboGrid（数据表格下拉框）[分页+搜索+多选]

猜你喜欢