datagrid中添加下拉框combobox

最新推荐文章于 2024-08-14 08:41:12 发布

zk_Kang

最新推荐文章于 2024-08-14 08:41:12 发布

阅读量8.1k

点赞数 2

分类专栏： web前端文章标签： datagrid combo box

本文链接：https://blog.csdn.net/zhang_kang_user/article/details/78411132

版权

web前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

js：

var editIndex = undefined;
function initDataEditDg() {
				var _KKXMItems = [{ "FYLXID": 0, "FYLXMC": "现金" }, { "FYLXID": 1, "FYLXMC": "货扣" }]
				$("#dataEditDg").datagrid({
					title: '',
					idField: 'HTH',
					rownumbers: true,
					singleSelect: false,
					height: 330,
					remoteSort: true,
					columns: [
						[{
							title: '操作',
							field: 'del',
							width: '60',
							align: 'center',
							formatter: function(value, row, index) {
								return '<a  href="#" onclick="dataEditDg_delrow(\'' + row.JSDH + '\')">删除</a>';
							}
						}, {
							title: '单号',
							field: 'JSDH',
							width: 110,
							align: 'center',
						}, {
							title: '类型',
							field: 'FYLXID',
							halign: 'center',
							width: 130,
							formatter: function(value) {
								for(var i = 0; i < _KKXMItems.length; i++) {
									if(_KKXMItems[i].FYLXID == value)
										//显示下拉框的名称，不是id
										return _KKXMItems[i].FYLXMC;
								}
							},
							editor: {
								type: 'combobox',//下拉框
								options: {
									valueField: 'FYLXID',//对应为表格中的field
									textField: 'FYLXMC',//显示值
									editable: false,
									//数据，可后台，可写死（演示为固定），后台可根据ajax，自己获取，先获取到为全局变量，在放入data中。
									data: _KKXMItems,
									required: false
								}
							}
						}]
					],
					onLoadError: function(res) {
						$.messager.alert("加载错误", res.responseText, 'error');
					},
					onClickRow: function(index, rowData) {
						if(editIndex != index) {
							if(endEditing()) {//行点击事件，让其可编辑
								$('#dataEditDg').datagrid('selectRow', index).datagrid('beginEdit', index);
								editIndex = index;
							} else {
								$('#dataEditDg').datagrid('selectRow', index).datagrid('endEdit', index);
							}
						}
					}
				});
			}

 function endEditing() {
            if (editIndex == undefined) { return true }
            if ($('#dataEditDg').datagrid('validateRow', editIndex)) {
                $('#dataEditDg').datagrid('endEdit', editIndex);
                editIndex = undefined;
                return true;
            } else {
                return false;
            }
        }

页面html

<div data-options="region:'center',title:'',split:true" style="padding: 5px; background: #eee; margin: 10px 0;">
					<table id="dataEditDg"></table>
				</div>