easyui 的datagrid表格中怎样实现多选的下拉列表

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了easyui 的datagrid表格中怎样实现多选的下拉列表相关的知识,希望对你有一定的参考价值。

easyui 的datagrid表格中怎样实现多选的下拉列表
easyui datagrid 中怎样使用 ComboBox multiple

大体一个例子
field: 'name', title: '企业名称', width: '70',align: 'center',
editor:
type: 'combobox',
options:
multiple:true,
valueField: 'entCode',
textField: 'entName',
url: '后台取数的ajax路径'



这样 当行开启编辑状态时 企业名称这个单元格就会显示combobox 并且可以多选
参考技术A 大体一个例子 
 field: 'name', title: '企业名称', width: '70',align: 'center', 
   editor:
        type: 'combobox',
            options: 
                multiple:true,
                valueField: 'entCode',
                textField: 'entName',
                url: '后台取数的ajax路径'
            
        
 

 这样 当行开启编辑状态时  企业名称这个单元格就会显示combobox 并且可以多选

easui datagrid 行获取后台sql所有数据:支持行chockbox多选,输出选中行任意属性;支持点击表中属性实现跳转;支持分页。

easyUI datagrid 代码:

<table id="tabgrid20170726191838251403" class="easyui-datagrid" params="fit:true,border:false,selectOnCheck:true,remoteSort:false,
    url:‘http://localhost:8090/gzdbthreeweb/engine/loadQueryData.pt?_queryid=20170726191838251403&dataid=20170726191919776397&gridtype=1‘,
    rownumbers:true,pagination:true,pageNumber:1,pageSize:10,checkOnSelect:true,checkOnSelect:true,onClickRow:onClickRow20170726191838251403,
    toolbar:‘#tb20170726191838251403‘">
        <thead>
            <tr>
            <th params="field:‘_checkid‘,checkbox:true" rowspan="1"></th>
                <th rowspan="1" colspan="1" params="align:‘left‘,field:‘report_task‘,sortable:true" width="442px">具体任务</th>
                <th rowspan="1" colspan="1" params="align:‘left‘,field:‘main_dept_name‘,sortable:true" width="347px">主办单位</th>
                <th rowspan="1" colspan="1" params="align:‘left‘,field:‘assist_dept_name‘,sortable:true" width="332px">协办单位</th>
            </tr>
        </thead>
</table>

<a href="#" class="zxui-linkbutton" plain="true" id="button495769" iconCls="null" onclick="onClickbutton495769();" >结束上报</a>

获取选中行的id,并拼接弹出:

function onClickbutton495769(){
	var rows = $(‘#tabgrid20170726191838251403‘).datagrid(‘getSelections‘);
	if(rows != null){
		var ids = "";
		for(var i=0;i<rows.length;i++){
			ids+= rows[i].id+",";
		}
		alert(ids);
	}
}

点击具体任务实现跳转:

function onClickRow20170726191838251403(rowindex, rowdata){
	var row = $(‘#tabgrid20170726191838251403‘).datagrid(‘getSelected‘); 
	if(row != null){ 
		var report_id = row.id; alert(report_id); 
		window.location.href="http://localhost:8090/gzdbthreeweb/engine/page_init.pt?_queryid=20170726205804017541&report_id="+report_id; 
	}
}

 

以上是关于easyui 的datagrid表格中怎样实现多选的下拉列表的主要内容,如果未能解决你的问题,请参考以下文章

jquery easyui datagrid 分页 多选

easyui怎么设置多选

easyui 子表格再嵌套一层表格,该怎样实现?

EasyUi下如何改变Datagrid的singSelect(是不是多选)属性?

Easyui datagrid 实现表格记录拖拽

jQuery easyui终有一个datagrid用来生成一个表格,怎样在里面加入输入框啊<input>,