关于easyui的一些操作

1、动态添加组件

定义目标位置

<div id="btnDiv"></div>

2、添加动态组件

function addItems(){
var conditionDiv = '<div class="itemsDiv">'
+' <span style="width:40px">监控项：</span>'
+' <select class="easyui-combobox item" name="item" data-options="editable:false" οnchange="sele_Change()">'
+' <option value="">请选择...</option>'
+' <option value="FAIL_COUNT_DAY">日异常量</option>'
+' <option value="FAIL_COUNT_H">小时异常量</option>'
+' <option value="FAIL_RATIO">异常率</option>'
+' <option value="AVG">分钟平均响应时间</option>'
+' <option value="COUNT">分钟调用量</option>'
+' </select>'
+' <span class="computatRule_span" style="width:40px">规则：</span>'
+' <select class="easyui-combobox computatRule" name="computatRule" data-options="editable:false">'
+' <option value="">请选择...</option>'
+' <option value="FluAscPerBaseOn1Day">同比波动百分比</option>'
+' <option value="Absolute">绝对值</option>'
+' </select>'
+' <span style="width:40px">阀值：</span>'
+' <input class="easyui-textbox threshold" name="threshold" style="width:50px">'
+'<button class="easyui-linkbutton" data-options="iconCls:\'icon-remove\'" style="font-size:12px" οnclick="removeConditionRule()">remove</button>'
+'</div>';

var target = $('#btnDiv').before(conditionDiv);

    //var targetObj = $(newElement).appendTo("#container");
$.parser.parse(target);
};

 

3、动态组件删除

function removeConditionRule(id) {
$('#' + id).remove();
}

 

4、动态组件取值

function getItemsValue(){
var itemsValue=[];

$('.itemsDiv').each(function(){
var outCom = $(this);

var itemCom = outCom.find($(".item"));

var computatRuleCom = outCom.find($(".computatRule"));

var thresholdCom = outCom.find($(".threshold"));

var valObj = {
"item":itemCom .val(),

"computatRule":computatRuleCom .val(),

"threshold":thresholdCom .val();

}

itemsValue.push(valObj);

});

}

 

5、datebox 范围限制

<input class="easyui-datebox" data-options="formatter:myformatter,parser:myparser,onSelect:selectStartDate" style="width: 110px" id="StartTime">
To :
<input class="easyui-datebox" data-options="formatter:myformatter,parser:myparser,onSelect:selectEndDate" style="width: 110px" id="EndTime">

$(function () {
bindDateBlur($("#StartTime")); bindDateBlur($("#EndTime"));
//控件的初始限制
$('#EndTime').datebox().datebox('calendar').calendar({
validator: function (endDate) {
return endDate <= new Date();
}
});
$('#StartTime').datebox().datebox('calendar').calendar({
validator: function (startDate) {
return startDate <= new Date();
}
});
})

 

//easyui官方重写时间格式的方法
function myformatter(date) {
var y = date.getFullYear();
var m = date.getMonth() + 1;
var d = date.getDate();
return y + '-' + (m < 10 ? ('0' + m) : m) + '-' + (d < 10 ? ('0' + d) : d);
}
function myparser(s) {
if (!s) return new Date();
var ss = (s.split('-'));
var y = parseInt(ss[0], 10);
var m = parseInt(ss[1], 10);
var d = parseInt(ss[2], 10);
if (!isNaN(y) && !isNaN(m) && !isNaN(d)) {
return new Date(y, m - 1, d);
} else {
return new Date();
}
}

//当选择开始日期时限定结束日期的范围
function selectStartDate(startDate) {
//返回calendar会清空EndTime内容,需要保存下
var tempEndDate = $('#EndTime').datebox('getValue')
$('#EndTime').datebox().datebox('calendar').calendar({
validator: function (endDate) {
//限定日期选择范围
return endDate >= startDate && endDate <= new Date();
}
});
//将EndTime写回去
$('#EndTime').datebox('setValue', tempEndDate);
}
//当选择结束日期时限定开始日期的范围
function selectEndDate(endDate) {
var tempStartDate = $('#StartTime').datebox('getValue');
$('#StartTime').datebox().datebox('calendar').calendar({
validator: function (startDate) {
return startDate <= endDate && startDate <= new Date();
}
});
$('#StartTime').datebox('setValue', tempStartDate);
}

 

//datebox的绑定事件
function bindDateBlur(st) {

st.datebox('textbox').bind('blur', function () {
var s = st.textbox('getText');
if (!s) return new Date();
var nt = s.replace(/\//g, '-');
s = (nt.split('-'));
var a = parseInt(s[0], 10);
var b = parseInt(s[1], 10);
var c = parseInt(s[2], 10);
var date = new Date();
if (!isNaN(a) && !isNaN(b) && !isNaN(c)) {
st.datebox('setValue', nt);
} else if (!isNaN(a) && !isNaN(b)) {
var y = date.getFullYear();
st.datebox('setValue', y + '-' + a + '-' + b);
} else {
var y = date.getFullYear();
var m = date.getMonth() + 1;
var d = date.getDate();
st.datebox('setValue', y + '-' + (m < 10 ? ('0' + m) : m) + '-' + (d < 10 ? ('0' + d) : d));
}
});
}

6、动态获取表头的列名及显示名称

GetFrozeData = function (gridStr, isFroze) {
     //获取所有未冻结列数据
     var cols = $(gridStr).datagrid('getColumnFields', isFroze);
     var array = [];
     for (var i in cols) {     
         //获取每一列的列名对象
         var col = $(gridStr).datagrid("getColumnOption", cols[i]);
         //声明对象
         var obj = new Object();
         obj["value"] = cols[i];
         obj["text"] = col.title.trim();
         //追加对象
         array.push(obj);
     }   
     return array;
 }

因为表格增加单选框之后，列头的单选框是无效的，所以需要隐藏

onLoadSuccess: function () {
    　　$("#tg").parent().find("div .datagrid-header-check").children("input[type=\"checkbox\"]").eq(0).attr("style", "display:none;");
　}

 7、loading

/*进度条提示*/
    $.messager.progress({
                    title: '提示',
                    msg: '导出中，请稍候……',
                    text: ''
                });

 /*关闭提示*/
$.messager.progress('close');

 8、修改layout 宽度高度

$('#p1').layout('panel', 'west').panel('resize', { height: height - 33 });