easyui之datagrid(combobox類型的editor)

easyui的datagrid使用combobox做爲editor,從combobox的下拉列表選值並提交url。javascript

比較簡單,以前因爲對easyui不熟,也沒查到合適的教程,走了很多彎路,現終於實現,整理一下。java

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

……
相關文章
相關標籤/搜索