EasyUi心得

★让DataGrid列宽均匀分布

columns : [[
{
            field : field,
            title : title,
            align : 'center',
            width : ($("#外层DIV").innerWidth() - 220) * 0.40
        }]]

其中减去的220表示固定宽度如行最前的行编号，行最前的多选CkeckBox，已经有时某列为操作按钮的宽度总和。
0.40表示本列占整个宽度的百分比。

★自定义DataGrid分页栏

var pager = $('#tt').datagrid('getPager');    // 得到datagrid的pager对象  
pager.pagination({    
    pageNumber : 1,
                        beforePageText : '第',
                        afterPageText : '页    共 {pages} 页',
                        displayMsg : '当前显示 {from} - {to} 条记录   共 {total} 条记录',    
    buttons:[{    
        iconCls:'icon-search',    
        handler:function(){    
            alert('search');    
        }    
    },{    
        iconCls:'icon-add',    
        handler:function(){    
            alert('add');    
        }    
    },{    
        iconCls:'icon-edit',    
        handler:function(){    
            alert('edit');    
        }    
    }],    
    onBeforeRefresh:function(){    
        alert('before refresh');    
        return true;    
    }    
});

★在datagrid中添加按钮或其他控件列
自定义类样式editcls

<style type="text/css">
.editcls {
    display: inline-block;
    height: 23px;
    width:25px;
    margin-left:2px; 
}
</style>
columns : [[
{
            field : 'opt',
            title : "操  作",
            align : 'left',
            fixed : true,
            width : 155,
            //设置按钮列
            formatter : function(value, row, index) {
                    var e = '<a  class="editcls" onclick="editCust(' + index+ ')"></a> ';
                    var d='<input  id="plandate' + row.planId + '" class="dateinput" value="' + value + '"/> ';
                    var i = '<input  id="plantodo' + row.planId + '" class="planinput" value="' + value + '"/> ';
                return e+i+d;

            }
        }]] ,
        onLoadSuccess : function(data) {
$('.dateinput').datetimebox({
        required : true,
        editable : false
});
$(".planinput").textbox({
        required : true,
        width : '100%'
});
$('.editcls').linkbutton({
        text : '',
        plain : false,
        iconCls : 'icon-edit'
});
$('.editcls').tooltip({
        position : 'bottom',
        trackMouse : 'true',
        content : '<span>编辑</span>',
    });
        }

★设置datagrid行高

.datagrid-row{
    height: 35px;
}
.datagrid-cell{
    height: 25px;
    line-height: 25px;
}

★让combobox中的文本居中

.combobox-item,.combo .textbox-text{
    text-align: center;
}

★合理使用combobox的onChange事件

var isAuto=false;
/*全局变量，用来防止在代码其他位置调用select方法时触发change事件。例如：
isAuto=false;
$('#skincombo').combobox('select',0);
isAuto=true;
*/
var changing=false;
/*
全局变量，如果onChange事件响应时间较长，此变量可以防止响应onChange事件时用户再次选择combobox导致onChange事件重复触发，类似于多线程的同步锁。
*/
$('#skincombo').combobox({
    onChange: function(newValue,oldValue){
//同步锁和手动触发判断
            if(isAuto && !changing){
                changing=true;
//将combobox清空，防止响应事件时用户重复选择
    $('#skincombo').combobox('clear');
    $('#skincombo').combobox('loadData',[{"value":0,"text":"请稍候","selected":true}]);
                $('#skincombo').combobox('select',0);
//执行响应
                $.ajax({
                    type: "post",
                    url: "MainController",
                    data: {action:'skin',skin:newValue},
                    dataType: "text",
                    success: function (result) {
                       location.reload();
                    },
                    error: function (xhr, textStatus, errorThrown) {
                        location.reload();
                    }
                });
            }
    }
    });

★绑定easyui-textbox的blur事件

$("input",$("#id").next("span")).blur(function(){
//………………
}

★简单的提示框

function showMsgBox(msg){
    if(!$("#MsgPopWin").html()){
        $('<div id="MsgPopWin" style="border:1px solid #ccc;position:absolute;z-index: 9999;padding: 5px;background-color: white;display:none">	<img  src="images/yes-512x512.png" width="50" height="50" align="middle">	<span style="font:normal normal 16px 微软雅黑;position: relative;top: 5px;"></span></div>').appendTo($("body"));
    }
    $("#MsgPopWin span").text(msg);
    setCenter("#MsgPopWin");
        $("#MsgPopWin").delay(100).fadeIn("normal").delay(500).fadeOut("normal");
}

★让元素与某个类样式同步

$(window).load(function() {
$(".cssform input").css({
        color : $(".panel-title").css("color"),
    });
}