easyui之datagrid(combobox类型的editor)

原创
2015/10/28 17:17
阅读数 8.9K

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
									}
								}
							);
						
					}
				},
			}
        },
	]],
});

……



展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
3 收藏
0
分享
返回顶部
顶部