EasyUI 问题记录

1、validatebox无法通过setValue设置值，使用jQuery方式获取及设置

其余combox、numberbox、datebox、datetimebox，都可以使用setValue方法

<input class="easyui-validatebox" type="text" name="start_site_code" data-options="required:true"/>

$("input[name='start_site_code']").val(code)

 $("#input_id").textbox("setValue", "xxx");
 $("#input_id").combox("setValue", "xxx");
 $("#input_id").numberbox("setValue", "xxx");
 $("#input_id").datebox("setValue", "xxx");
 $("#input_id").datetimebox("setValue", "xxx");

2、初始化取消表单验证

初始化时 自动带出的数据填入表单，表单的验证样式依然在，点击后才会变白

// 加载页面时就禁用验证，点击input框开启
$('input.easyui-validatebox').validatebox('disableValidation')
    .focus(function () { $(this).validatebox('enableValidation'); })
    .blur(function () { $(this).validatebox('validate') })

但是这里你禁用后，点提交时是不会对表单验证的，这时要重新开启验证

if (!$('#form').form('enableValidation').form('validate')) {
    showMessager('提示消息', '请先写完整进行提交', 'warning');
    return;
}

3、dataGrid尽量不要嵌入在Tabs下，是没效果的

4、dataGrid自动生成可编辑的空表格

很菜，只写出这样

<table id="dggggg"></table>

function radioChange() {
    if (radioValue == 1) {
        tabsTableColumns = [
            [{
                field: 'id',
                title: 'id（必填项）',
                editor: 'text',
                align: 'center',
                width: '200',
            }, {
                field: 'name',
                title: '姓名',
                editor: 'text',
                align: 'center',
                width: '200',
            }]
        ]
        tabsTableData = [
            {
                id: null,
                name: null,
            }, {
                id: null,
                name: null,
            },{
                id: null,
                name: null,
            }]
    }
    loadBatchNewTable()
}

function loadBatchNewTable() {
    $("#dggggg").datagrid({
    	// 最好给一个初始化的宽高，不然有时候会渲染不出来
        height: 300,
        width: 850,
        // 动态设置表格
        data: tabsTableData,
        columns: tabsTableColumns,
        // 条纹样式
        striped: true,
        // 点击单元格加载
        onClickCell: function (index, field, value) {
        	// 单元格变成输入框
            $(this).datagrid('beginEdit', index); 
            var ed = $(this).datagrid('getEditor', {
                index: index,
                field: field
            });
            // 输入框获得焦点
            $(ed.target).focus();
            // 绑定blur事件
            $(ed.target).bind("blur", function(e){
                let val = e.target.value
                if(val) {
                    // 这里可以写失去焦点后的一系列操作
                    // ......
                }
            });
            // $(this).datagrid('endEdit', index);    // 结束编辑状态，触发onAfterEdit事件
        }
    });
}

// 这里是如果你有调用接口回填信息的需求，可以通过getRows获取某行，以及在上面onClickCell方法中可以拿到当前行的index，赋值后可以refreshRow刷新下
let dataRows = $('#dggggg').datagrid('getRows');
dataRows[rowIndex]['name'] = name
$('#dggggg').datagrid('refreshRow', rowIndex);

// 提交grid
function submitDataGrid() {
    let endRows = $('#dggggg').datagrid("getRows");
    // 将 dataGrid 所有的行都结束编辑
    for (let i = 0; i < endRows.length; i++) {
        $('#dggggg').datagrid('endEdit', i);
    }
    // 获取编辑的数据
    let rows = $('#dggggg').datagrid("getRows")
    // 过滤空数据
    let result = rows.filter(item => {
        return Object.values(item).some(i => i)
    })
}

5、数据列自动填充满dataGrid