记录Datagrid使用的一些事项

时间：2022-06-11 10:21:49

1.将两个列的文本拼接到一起并显示，如列1为name，列2为code，需要显示name(code)。如：小明(123)

则初始化datagrid时在columns[]里加入：列1添加formatter方法，列2添加hidden:true。

{ field: 'CHNItemName', title: '名称', width: 350, sortable: false, align: 'left',

                        formatter: function (value, rec, index) {

                            return value + " (" + rec.BarCode + ')';

                        }

},

{ field: 'BarCode', title: 'BarCode', width: 100, sortable: false, align: 'left', editor: {type:'text',editable:false}, hidden:true }

2.在生成datagrid时将某列定义为可编辑状态或不可编辑，而不是在生成datagrid之后再控制编辑状态：将不可编辑的列的editor里写空(可编辑列的editor不为空)。

{ field: 'QTFYTEXT', title: '其他费用', width: 100, sortable: false, align: 'left', editor: {} }

在onLoadSuccess里对每一行执行beginEdit(开启编辑状态)。

onLoadSuccess: function (data) {

                            editIndex = $('#MyPurchaseOrder').datagrid('getRows').length - 1;

                            for(var i=editIndex;i>=0;i--)

                            {

                                $('#MyPurchaseOrder').datagrid('selectRow', i).datagrid('beginEdit', i);

                            }
}

3.控制datagrid中numberbox输入框可输入的最大值最小值：开始想通过直接设置numberbox的data-options属性的max/min，但html渲染完成后即使更改此属性也不生效。查阅资料后发现应在onBeforeEdit时设置列的editor.options.max，即可生效。

{ field: 'OrderQty', title: '数量', width: 90, sortable: false, align: 'left', editor: { type: 'numberbox', options: { precision: 3}} }
onBeforeEdit:function(rowIndex, rowData)

                        {

                            var columnOption = $('#MyPurchaseOrder').datagrid('getColumnOption',"OrderQty");

                            if(columnOption != null){

                                columnOption.editor.options.max = rowData.OrderQty;

                            }

                        }

　　

相关文章