easyui之datagrid（combobox类型的editor）

最新推荐文章于 2023-11-11 16:57:18 发布

weixin_33787529

最新推荐文章于 2023-11-11 16:57:18 发布

阅读量473

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/epoc/blog/523228

版权

为什么80%的码农都做不了架构师？>>>

easyui的datagrid使用combobox作为editor，从combobox的下拉列表选值并提交url。

比较简单，之前由于对easyui不熟，也没查到合适的教程，走了不少弯路，现终于实现，整理一下。

<script type="text/javascript">
		var editIndex = undefined;
		function endEditing(){
			if (editIndex == undefined){return true}
			if ($('#dg').datagrid('validateRow', editIndex)){
				$('#dg').datagrid('endEdit', editIndex);
				editIndex = undefined;
				return true;
			} else {
				return false;
			}
		}
		function onClickCell(index){
			if (endEditing()){
				$('#dg').datagrid('selectRow', index)
						.datagrid('beginEdit', index);
				editIndex = index;
			} else {
				$('#dg').datagrid('selectRow', editIndex);
			}
		}
</script>

……

$("#dg").datagrid({
	url: 'your url',
	pagination: true,
	rownumbers: true,
	singleSelect: true,
	collapsible: true,
	pageNumber: 1,
	pageSize: 30,
	onClickCell: onClickCell,
	columns: 
	[[
	    {field: 'flag',title: '标记', width: 80, align: 'center', sortable:false,
        	editor: {
        		type: 'combobox', 
        		options: 
        		{
        			panelHeight: 'auto',
	        		valueField:'id',
					textField:'text',
					editable:false,
					data:[
						{id:'' , text:'空'},
						{id:'a', text:'a' },
						{id:'b', text:'b' },
						{id:'c', text:'c' },
						{id:'d', text:'d' }
					],
					onSelect: function(record){
							var value = $(this).combobox("getValue");
							$.post('your url',
								{
									// code: xxxx
									flag: value
								},
								function(data, status)
								{
									if (status == 'success')
									{
										// do something
									}
								}
							);
						
					}
				},
			}
        },
	]],
});

……

转载于:https://my.oschina.net/epoc/blog/523228