easyui-002 combogrid类型input的茴香豆

loveqiubai

于 2020-06-16 08:12:46 发布

阅读量237

点赞数

分类专栏： easyUi

本文链接：https://blog.csdn.net/loveqiubai/article/details/106769428

版权

easyUi 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

combogrid参考easyui官方介绍

本次主要演示一个input的使用

使用方案一：

1.1 new

<li>
	<span class="label">朝阳教育局人员：</span>
	<input name="chaoYangPersonAccount" id="chaoYangPersonAccount" class="easyui-combogrid"
		   data-options="
	   url: getRootPath() + '/base/user/list?eduType=BJ-CY',
		method: 'get',delay: 500,mode: 'remote',
		idField:'account',
		textField: 'name',
		required:true,
		panelWidth:700,
		panelHeight:240,
		pageSize: 10,
		pageList: [10,20,50,100],
		rownumbers: true,
		pagination: 'true',
		columns: [[
			{field: 'account', title: '账号', width:200},
			{field: 'name', title: '姓名', width:200},
			{field: 'dept', title: '部门', width:260},
		]],
		onSelect: function(rowIndex,rowData) {
			$('#chaoYangPersonAccount').data().checkData = rowData;
			$('#chaoYangPersonAccountID').val(rowData.id);
		}"/>
</li>
<!-- 这个彩蛋你们未必需要 -->
<input type="hidden" id="chaoYangPersonAccountID" name="chaoYangPersonAccountID"/>

1.2 modify

<li><span class="label">朝阳教育局人员：</span>
		<input name="chaoYangPersonAccount" id="chaoYangPersonAccount" class="easyui-combogrid"
			   th:value="${bureau?.chaoYangPersonAccount}"
			   data-options="
		   url: getRootPath() + '/base/user/list?eduType=BJ-CY&account=' + ${bureau?.chaoYangPersonAccount},
			method: 'get',delay: 500,mode: 'remote',
			idField:'account',
			textField: 'name',
			required:true,
			panelWidth:700,
			panelHeight:240,
			pageSize: 10,
			pageList: [10,20,50,100],
			rownumbers: true,
			pagination: 'true',
			columns: [[
				{field: 'account', title: '账号', width:200},
				{field: 'name', title: '姓名', width:200},
				{field: 'dept', title: '部门', width:260},
			]],
			onSelect: function(rowIndex,rowData) {
				$('#chaoYangPersonAccount').data().checkData = rowData;
				$('#chaoYangPersonAccountID').val(rowData.id);
			}"/>
	</li>
<!-- 这个彩蛋你们未必需要 -->
<input type="hidden" id="chaoYangPersonAccountID" name="chaoYangPersonAccountID"/>

1.3 new & modify二合一

<li>
	<span class="label">朝阳教育局人员：</span>
	<input name="chaoYangPersonAccount" id="chaoYangPersonAccount" class="easyui-combogrid"
		   th:value="${model?.chaoYangPersonAccount}" required="required"
		   th:attr="data-options='
				required:\'true\',
				url: getRootPath() + \'/base/user/list?eduType=BJ-CY\',
				queryParams: {q: \''+${bureau?.chaoYangPersonAccount}+'\'},
				method: \'get\',delay: 500,mode: \'remote\',
				idField:\'account\',
				textField: \'name\',
				panelWidth:450,
				panelHeight:240,
				pageSize: 10,
				pageList: [10,20,50,100],
				rownumbers: true,
				required:false,
				pagination: \'true\',
				onSelect:function(value,row,index){
					if(row.id){
						$(\'#chaoYangPersonAccountID\').val(row.id)
					}
				},
				columns: [[
					{field: \'account\', title: \'账号\', width:200},
					{field: \'name\', title: \'姓名\', width:200},
					{field: \'dept\', title: \'部门\', width:260},
				]]'"/>

</li>
<!-- 这个彩蛋你们未必需要 -->
<input type="hidden" id="chaoYangPersonAccountID" name="chaoYangPersonAccountID"/>

方案二：input在一行作为一个th使用时候

<table id="bureauTable">
	<thead>
		<tr>
			<!-- 动态值 -->
			<th data-options="field:'chaoYangPersonName',width:200,
					editor: {
						type: 'combogrid',
						options: {
							url: getRootPath() + '/base/user/list?eduType=BJ-CY',
							method: 'get',delay: 500,mode: 'remote',
							idField:'name',
							textField: 'name',
							required:true,
							panelWidth:700,
							panelHeight:240,
							pageSize: 10,
							pageList: [10,20,50,100],
							rownumbers: true,
							pagination: 'true',
							columns: [[
								{field: 'account', title: '账号', width:200},
								{field: 'name', title: '姓名', width:200},
								{field: 'dept', title: '部门', width:260},
							]],
							onSelect: MyUtil.chaoYangPersonNameSelector
						}}">朝阳教育局人员</th>
			<th data-options="field:'chaoYangPersonAccount',width:200,
				hidden:true,
				editor: {
					type: 'textbox',
					options: {
						editable: false,
						required: true,
					}}">朝阳教育局人员编码</th>
			
			
			<!-- 固定值 -->
			<th data-options="field:'catName',width:200,
			   editor: {
				type: 'combogrid',
				options: {
						idField:'name',
						textField: 'name',
						panelWidth:480,
						panelHeight:240,
						required:true,
						striped: true,
						rownumbers: true,
						editable: true,
						columns: [[
							{field: 'name', title: '学院名称', width:200},
							{field: 'code', title: '学院代码', width:200}
						] ],
						data: [
							{name: '初民学院', code:'CM'},
							{name: '文学院', code:'W'},
							{name: '法学院', code:'F'},
							{name: '历史文化学院', code:'LSWH'},
							{name: '哲学社会学学院', code:'ZXSH'},
							{name: '政治与公共管理学院', code:'ZZYGGGL'},
							{name: '教育科学学院', code:'JYKX'},
							{name: '外国语学院', code:'WGY'}
										
						  ],
						  onSelect: Vocation.changeCatName
					}
				}">学院名称</th>
			<th  th:hidden="hidden" data-options="field:'catCode',width:200,
				editor: {
					type: 'textbox',
					options: {
						editable: false,
						required: true,
					}}">学院代码-可能会有多个学院公用代码情况</th>
		</tr>
	</thead>
</table>

<script>		
	var MyUtil={
		chaoYangPersonNameSelector:function (rowIndex,rowData) {
			//获得所有在编辑的行
			var editIndex = $('#bureauTable').datagrid('getEditingRowIndexs');
			if(editIndex&&editIndex.length>0){
				var editors = $('#bureauTable').datagrid('getEditors', editIndex[0]);
				if(editors&&editors.length>0){
					editors.forEach(function(editCell){
						if(editCell.field=='chaoYangPersonAccount'){
							$(editCell.target).textbox('setValue',rowData.account);
						}
					})
				}
			}
        },
		changeCatName:function (rowIndex,rowData) {
            var editIndex = $('#bureauTable').datagrid('getEditingRowIndexs');
            if(editIndex&&editIndex.length>0){
                var editors = $('#bureauTable').datagrid('getEditors', editIndex[0]);
                if(editors&&editors.length>0){
                    editors.forEach(function(editCell){
                        if(editCell.field=='catName'){
                            $(editCell.target).combogrid('setValue',rowData.name);
                        }
                        if(editCell.field=='catCode'){
                            $(editCell.target).textbox('setValue',rowData.code);
                        }

                    })
                }
            }
        },
	}
</script>