datagrid中添加下拉框combobox

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zhang_kang_user/article/details/78411132

js：

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

页面html

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