easyUI--杂记

最新推荐文章于 2023-09-08 14:56:59 发布

原创最新推荐文章于 2023-09-08 14:56:59 发布 · 248 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#easyUI

前端专栏收录该内容

35 篇文章

订阅专栏

本文是一篇关于easyUI框架的使用心得，涵盖了dialog的渲染、combobox多选赋值、select自定义验证、时间比较方法以及控件自适应页面大小和表单验证等实用技巧。还介绍了如何设置列排序，提供了相关示例代码。

在线演示地址:http://www.miniui.com/demo/#src=tooltip/grid.html

1、dialog需要事先渲染出来，然后才能找到包含在里面的其他页面元素。

2、jQuery EasyUI combobox多选及赋值

 1、多选属性multiple
     multiple:true多选 multiple:false单选
     <input class="easyui-combobox" id="xgr" name="xgr" style="width:435px" url='../Source/Public/json.ashx?action=zhymch' data-options="valueField:'zhymch', textField:'zhymch',multiple:true,panelHeight:'auto'" >
	2、赋值
     1>、单选赋值setValue
        $('#Id').combobox('setValue','key')
     2>、多选赋值setValues
        多选key值是一个数组，$('#Id').combobox('setValues','key1,key2,key3'.split(','))

3、easyUi：select标签自定义验证

<select class="easyui-combobox" name="pingTai" id="pingTai" editable=false panelHeight="auto" validType="selectValueRequired['#pingTai']" invalidMessage = "请选择平台">
     <option style="width:160px;" value="" >所有平台</option>
     <c:forEach items="${platforms}" var="platform">
          <option style="width:160px;" value="${platform.platformId}" >${platform.platformName}</option>
     </c:forEach>    
</select>

$.extend($.fn.validatebox.defaults.rules,{
	selectValueRequired : {
		validator : function(value, param) {
		      console.info($(param[0]).find("option:contains('" + value + "')").val());
		      return $(param[0]).find("option:contains('" + value + "')").val() != '';
		},
		message: '该选项不能为空.' 
	}
});

4、比较两时间的自定义方法

<td>
      <input id="beginDate" name="beginDate" type="text" style="width:100px" editable=false class="easyui-datebox" required=true></input> 至
      <input id="endDate" name="endDate" type="text" style="width:100px" editable=false class="easyui-datebox" required=true validType="equalsDate['beginDate']" invalidMessage="时间间隔必须大于等于0小于等于30。"></input>
</td>

说明：validType="equalsDate['beginDate']" ：beginDate为传递过去的参数

//自定义时间输入判断
$.extend($.fn.validatebox.defaults.rules, {   
    equalsDate:{
        validator: function(value,param){   
            var beginDate = $('input[name='+param+']').val();
            var endDate = value;
           
            var aDate, oDate1, oDate2, iDays;
             
            aDate = beginDate.split("-");
            oDate1 = new Date(aDate[0] + '-' + aDate[1] + '-' + aDate[2]);  //转换为yyyy-MM-dd格式
            aDate = endDate.split("-");
            oDate2 = new Date(aDate[0] + '-' + aDate[1] + '-' + aDate[2]);
           
            iDays = parseInt(Math.round(oDate2 -oDate1) / 1000 / 60 / 60 / 24); //把相差的毫秒数转换为天数
           
            if(iDays>30 || iDays <0){
                return  false;
            }
           
            return true;
        },   
        message: '时间间隔必须大于等于0小于等于30。'  
    }   
});

说明：

1、equalsDate:自定验证的方法名
2、validator: function(value,param)：value 为自己文本框的值，param为页面调用时传过来的参数

5、让控件自动适应页面大小

说明：fit="true",自动适应

6、添加了验证的表单验证

if ($('#userSearchForm').form("validate")) {
}

7、设置列排序

首先再js中设置，那些列可以排序，代码如下：

{field:'showLevel',title:'事件序号',width: 150,align:'center',sortable:true},
{field:'eventNum',title:'数量',width: 150,align:'center',sortable:true}

说明：sortable:true表示可以用该列排

然后在后台获取需要排序的列，和排序方式

//要排序的方式desc或者asc--order无需定义该变量是easYUI自动封装
String order = request.getParameter("order");
//要排序的列名--sort无需定义，ext自动后传
String sort = request.getParameter("sort");

8、操作成功后，等点击确定后跳转页面，无取消按钮的那种

function addDataConfig(){
	//验证框架
	if ($('#dataConfigForm').form("validate")) {	
		var businessName = $("#dataConfigForm input[name='businessName']").val();	
		var ip = $("#dataConfigForm input[name='ip']").val();					
		var port = $("#dataConfigForm input[name='port']").val();					
		var db = $("#dataConfigForm input[name='db']").val();						
		var user = $("#dataConfigForm input[name='user']").val();					
		var passwd = $("#dataConfigForm input[name='passwd']").val();				
		var dbType = $("#dataConfigForm input[name='dbType']").val();				
		var isUsed = $("#dataConfigForm input[name='isUsed']").val();	
				
		//发送post请求
		$.post(
			"export_data!addDataConfig.action", 
			{
				"businessName":businessName,
				"ip": ip,
				"port":port,
				"db":db,
				"user":user,
				"passwd":passwd,
				"dbType":dbType,
				"isUsed":isUsed
			}, 
			function (data) {
				//操作成功后，等点击确定后跳转页面，无取消按钮的那种
				if(data == "true"){
					$.messager.alert('提示','添加成功','info',function(){
						location.replace("export_data!jumpDataExport.action"); 
					});
				}else {
					tiShi("操作失败，请检查配置信息是否正确。",'3000');
				}
			}
		);
	}
};