easyui踩坑

easyui中获取界面值方法

• easyui textbox 实际是是input，在生成input时候生成了3个input，原input被隐藏，原input只有长度被显示的input继承，另外还有一个input是隐藏的，用于记录存储值。

// easyui textbox在外层包裹div才能有效绝对定位
<div style="position:absolute;left:21px;top:82px;">
    /*原始input被隐藏*/
    <input id="SKDBedit1" class="easyui-textbox textbox-f" type="text" tabindex="1" style="width: 121px; display: none;" dataset="DsMain" field="bm" d="uf_selectbm()" c="" k="uf_selectbm()">
    /*easyui生成的包裹标签*/
    <span class="textbox" style="width: 119.182px;">
    /*显示input，用于显示在界面，getText是获取的显示值*/
    <input id="_easyui_textbox_input2" type="text" class="textbox-text validatebox-text textbox-prompt" autocomplete="off" tabindex="1" placeholder="" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; height: 22px; line-height: 22px; width: 111.182px;">
    /*被隐藏，用于存储值，getValue是获取的这里的值*/
    <input type="hidden" class="textbox-value" value="存储值">
    </span>

</div>

在easyui-textbox中，getValue以及通过ID.value获取的是存储值，需要焦点离开input才能获取
getText是获取的显示值,焦点不离开时获取的值

$('#tb').textbox('getText');//显示值
$('#tb').textbox('getValue'); == SKDBedit1.value//存储值

• easyui datagrid中每个可以编辑单元格的input和textbox类似，下面是比较粗暴的使用jquery直接获取值【仅供参考】：

var td=$('.datagrid-view .datagrid-view2 .datagrid-body [field="phone"]')[index];
    var val=$(td).find('span input:first').val();
    var rows=table_main.datagrid('getRows');
    var arr=new Array();
    for (var i = 0; i < rows.length; i++) {
        if(i!=index && trim(rows[i].phone)!=''){
           arr[i]=trim(rows[i].phone); 
        }
    }
    arr.push(val);
    var cf=f_is_cf(arr);
    if(cf.length!=0){
        $.messager.alert('系统提示','出现重复手机号：'+cf,'error');
        return false;
    }

easyui中整数排序问题

参考:https://www.cnblogs.com/TimBing/p/3639525.html

var _760=col.sorter||function(a,b){
    return a==b?0:(a>b?1:-1);
};

替换成

var _760=col.sorter||function(a,b){
    if(parseFloat(a)) a = parseFloat(a);
    if(parseFloat(b)) b = parseFloat(b);
    return a==b?0:(a>b?1:-1);
};

• 改动主要用于判读是否整数，源代码全部按照字符串处理，所以造成整数排序错误

datagrid分页

参考：https://www.cnblogs.com/futai/p/6033255.html

• 自带分页计算方式

$page=$_REQUEST['page']?$_REQUEST['page']:1;//当前第几页
$rows=$_REQUEST['rows']?$_REQUEST['rows']:10;//每页显示的记录数
$v_begin=($page-1)*$rows+1;//开始条数
$v_end=$v_begin+$rows-1;//结束条数

iframe方式整合easyui

<!--panel_2-->
<div class="easyui-panel panel_2" title="方案编写"     
        style="width:100%;height:65%;padding:0px;background:#fafafa;"   
        data-options="collapsible:true,maximizable:true,maximized:true">   
<div id="" class="easyui-tabs" title="审核面板"  data-options="fit:true,border:false">
    <div title="抬头SQL" style="padding:0px;display:none;background:#EEE9E9;">
        <!--<iframe src="_codemirror_sql.html" id="iframe" style="width:100%;height:100%;"></iframe>-->
        <!--<iframe src="" class="iframe_codemirror" style="width:100%;height:99%;" frameborder=0 border=0></iframe>-->
    </div>
    <div title="明细SQL" style="padding:0px;display:none;background:#EEE9E9;">
        <!--<iframe src="https://www.soft-xnsk.com/k/index.php?editor/edit#filename=D%3A%2FphpStudy%2FWWW%2Fdingding%2Fddhtml_sm%2FCKIMG%2FSMConsole%2F_sksh.html" class="" style="width:100%;height:100%;" frameborder=0 border=0></iframe>-->
        
    </div>
    <div title="抬头反SQL" style="padding:0px;display:none;background:#EEE9E9;"></div>
    <div title="明细反SQL" style="padding:0px;display:none;background:#EEE9E9;">
        <!--<iframe src="_codemirror_sql.html" id="iframe" style="width:100%;" οnlοad="this.height = this.contentDocument.documentElement.scrollHeight + 'px'"></iframe>-->
    </div>
</div>
</div>

单元格赋值

• easyui的值包含两部分：datagrid-view上显示的值，field存储的值，endedit后可以把field值更新到datagrid-view上面，但是直接显示需要使用jquery去手动赋值

//这里是表格内嵌的combogrid的onchange事件
onChange:function(newValue, oldValue){
    var g = $(this).combogrid('grid');	// 获取数据表格对象
    var r = g.datagrid('getSelected');	// 获取选择的行
    var row_index=table_main.datagrid('getRowNum');//获取主表格行号（扩展函数）
    <!--console.log(row_index);-->
    if (r) {
        var fieldName='position';
        var value=r.position;//设置单元格值（存储的值，不显示）
        var index=(row_index-1);
        var grid=table_main;
        EasyUIDataGrid.setFieldValue(fieldName, value, index, grid);（自定义函数）
    }
    
}
<!--扩展一个获取行号函数-->
$.extend($.fn.datagrid.methods, {
	getRowNum:function(jq){
		var opts=$.data(jq[0],"datagrid").options;
		var array = new Array();
		opts.finder.getTr(jq[0],"","selected",1).each(function(){
			array.push($(this).find("td.datagrid-td-rownumber").text());
		});
		return array.join(",");
	}
});

// 设置单元格值
// easyui datagrid 单元格赋值 https://blog.csdn.net/gt15886435708/article/details/78767798
var EasyUIDataGrid = {
    //设置列的值(适用于所有列)
    setFieldValue: function(fieldName, value, index, grid) {
        if (grid == undefined || grid == '') {
            grid = $('.table_main');
        }
        if (index == undefined || index == '') {
            index==0;
        }
        var row = grid.datagrid('getRows')[index];
        if (row != null) {
            var editor = grid.datagrid('getEditor', {
                index: index,
                field: fieldName
            });
            if (editor != null) {
                this.setValueToEditor(editor, value);
            } else {
                var view = $('.datagrid-view');
                for (var i = 0; i < view.length; i++) {
                    if ($(view[i]).children(grid.selector).length > 0) {
                        var view = $(view[i]).children('.datagrid-view2');
                        var td = $(view).find('.datagrid-body td[field="' + fieldName + '"]')[index]
                        var div = $(td).find('div')[0];
                        $(div).text(value);
                    }
                }
                row[fieldName] = value;
            }
            // grid.datagrid('clearSelections');//取消所有行选择
        }
    },
    //设置datagrid的编辑器的值
    setValueToEditor: function(editor, value) {
        switch (editor.type) {
            case "combobox":
                editor.target.combobox("setValue", value);
                break;
            case "combotree":
                editor.target.combotree("setValue", value);
                break;
            case "textbox":
                editor.target.textbox("setValue", value);
                break;
            case "numberbox":
                editor.target.numberbox("setValue", value);
                break;
            case "datebox":
                editor.target.datebox("setValue", value);
                break;
            case "datetimebox":
                editor.target.datebox("setValue", value);
                break;
            default:
                editor.html = value;
                break;
        }
    }
}

combogrid表格联动附值

//combogrid的改变事件中找到当前行联动赋值给其他字段，字段值显示和字段存储值都要赋值，才能正确
onChange:function(newValue, oldValue){//设置联动数据
    var g = $(this).combogrid('grid');	// 获取数据表格对象
    var r = g.datagrid('getSelected');	// 获取选择的行
    var row_index=table_main.datagrid('getRowNum');
    console.log('onChange行号：'+row_index);
    if (r) {
        var grid=table_main;
        EasyUIDataGrid.setFieldValue('bm', r.bm, row_index-1, grid);
        EasyUIDataGrid.setFieldValue('duifbsh', r.duifbsh, row_index-1, grid);
        EasyUIDataGrid.setFieldValue('duifname', r.duifname, row_index-1, grid);
    }
}
}
<!--或者使用easyui提供的方法更好-->
$('#_skdesigncx_table_pro').datagrid('updateRow',{//联动可以直接更新
        index:2,
        row:{value:row.chnname}
    });

清空表格值

$('#_skdesigncx_table_pro').propertygrid('loadData',{ total: 0, rows: [] });//清空属性表格