前台EasyUI哪些事一

最新推荐文章于 2019-11-30 12:34:15 发布

最是那一低头的温柔

最新推荐文章于 2019-11-30 12:34:15 发布

阅读量1.6k

点赞数

分类专栏： EasyUI

本文链接：https://blog.csdn.net/HUXU981598436/article/details/12039107

版权

EasyUI 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

Easyui技术学习，更多知识请访问https://www.itkc8.com

最近在公司做用EasyUI做了一个简单的报表，完成之后写写所遇到的问题：

1：首先用了一个布局class="easyui-layout"(具体看文档)，分为region="north"和region="center"，north中放的是查询的条件

显示的界面是

easyui-layout中一些常用的属性：自适应fit=true;title="面板标题";边框border=true;分隔条可拖动split=true;iconCls="面板头图标";href='超链接';resize="布局面板尺寸大小";返回特定面板panel="region值";指定折叠面板collapse="region值";延伸特定面板expand="region值"；删除指定面板：remove="region值"；添加一个面板add,注意add是options形式这种option形式一般是

如

$('#cc').layout('add',{   
    region: 'west',   
    width: 180,   
    title: 'West Title',   
    split: true,   
    tools: [{   
        iconCls:'icon-add',   
        handler:function(){alert('add')}   
    },{   
        iconCls:'icon-remove',   
        handler:function(){alert('remove')}   
    }]   
});

EasyUI分为直接在html中写法和js中写法，个人比较喜欢用js的写法：如：

<div id="cc" class="easyui-layout" style="width:600px;height:400px;">  
    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>  
    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>

$('#cc').layout();   
// collapse the west panel   
$('#cc').layout('collapse','west');

本人也是看中文文档http://api.btboys.com/easyui/#和CHM的API慢慢学习的，还是自己结合这两个文档好好学习。

2:其次center大体用了一个折叠面板来显示查询类型所显示的数据表格。class="easyui-accordion"，折叠面板具体看文档

使用html标签创建可伸缩面板，只须要对<div>标签引用'easyui-accordion'类。

<div id="aa" class="easyui-accordion" style="width:300px;height:200px;">  
    <div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">

$('#aa').accordion({ animate:false });

我要点击按钮之后就弹出对应的一个面板就用

$('#aa').accordion('select','title');

3.查询条件都是用的class="easyui-combobox"方式

combo创建可以从<input>和<select>元素使用javascript,注意从标记创建combo是无效的.

<input id="cc" value="001">

$('#cc').combo({   
    required:true,   
    multiple:true  
});

这是我自己的：

<div id="row1">	
	<span>排序方式</span>
		<select name="ordertypeshow" id="ordertypeshow" class="easyui-combobox" panelHeight="auto" editable=false style="width:56px;">
			<option selected='selected' value="0">降序</option>
			<option value="1">升序</option>
		</select>
	</div>

<span>公司名称</span>
		<select name="dm_company" id="dm_company" class="easyui-combobox" panelHeight="auto" editable=false style="width:77px;">
			<option selected='selected' value="all">所有公司</option>
				<c:forEach items="${listSelectCompany}" var="listSelectCompany">
			<option value="${listSelectCompany.dm_company}">${listSelectCompany.dm_company}</option>
				</c:forEach>
		</select>

注意：

multiple

boolean

决定是否支持多项选择.

false

separator

string

多项选择的时候的文本分隔符.

还有我那个

<div id="row1">

是在上面定义了一个

<style type="text/css">
		div#row1 {display: inline }
		div#row2 {display: inline }
	</style>

目的是不让排序方式外层加了个div之后就换行，这样就强制这些选择条件在一行显示。

还有一个是我没找到cobobox的onClick方法，网上说是屏蔽了所以我用了onChange，代码如下

//查询类型点击
  			$("#querytype").combobox({
  				onChange:function(newValue,oldValue){
  				if(newValue == 1 && oldValue == 0){
  					$("#row1").hide();
  					$("#searchComposition").show();
  					$("#searchexportComposition").show();
					document.getElementById("searchCompany").style.display="none"; //a标签的id
					document.getElementById("searchexport").style.display="none"; //a标签的id
  				}else if(newValue == 0 && oldValue == 1){
  					$("#row1").show();
  					$("#searchCompany").show();
  					$("#searchexport").show();
					document.getElementById("searchComposition").style.display="none"; 
					document.getElementById("searchexportComposition").style.display="none"; 
  				}
  					}
  				});

那个newValue == 1和oldValue == 0 中的1和0是option中的value

easyui-combobox很多属性和方法自己看看API即可。

4.选择条件用了datetimebox.

根据标记创建datetimebox.

<input class="easyui-datetimebox" name="birthday"    
        data-options="required:true,showSeconds:false" value="3/4/2010 2:3" style="width:150px">

使用javascript创建datetimebox.

<input id="dt" type="text" name="birthday"></input>

$('#dt').datetimebox({   
    value: '3/4/2010 2:3',   
    required: true,   
    showSeconds: false  
});

我自己的代码是

<span>时间区间</span>	
		<input id="queryTimeStart" type="text" name="queryTimeStart" style="width:178px;"></input> 
		
	<div id="row2" style="display:none;">
	<span>—</span>	
		<input id="queryTimeEnd" type="text" name="queryTimeEnd" style="width:178px;"></input> 		
	</div>

		//时间
  			$('#queryTimeStart').datetimebox({   
    			value: first,   
    			required: true,   
    			showSeconds: true,
    			editable : false  
			});

first是自己定义了一个时间，

var dateTime = new Date();
    	var yy=dateTime.getFullYear();
		var MM=dateTime.getMonth()+1;  //因为1月这个方法返回为0，所以加1
    	var first = MM+"/"+"01/"+yy + " 00" + ":00" + ":00";

如果用当前时间就是

value: 'sysdate',

这个地方我做了个点击另一个下拉框来显示和隐藏其中一个时间

5.查询按钮用了一个a标签

<a href="javascript:void(0);" id="searchCompany" name="searchCompany" class="easyui-linkbutton" plain="true" onclick="doSearchCompany()" iconCls="icon-search"></a>

点击事件就提交数据

//公司加载
  		function doSearchCompany(){
  			$('#aa').accordion('select','各CP统计某月份业务量');
  			$('#datagridCompany').datagrid('load',{
				querytype : $("#tb").find('[name=querytype]').val(),
				dm_company : $("#tb").find('[name=dm_company]').val(),
				ordertype : $("#tb").find('[name=ordertypeshow]').val(),
				fee : $("#tb").find('[name=fee]').val(),
				queryTime : $("#tb").find('[name=queryTime]').val(),
				queryTimeStart : $("#tb").find('[name=queryTimeStart]').val(),
				queryTimeEnd : $("#tb").find('[name=queryTimeEnd]').val(),
			});
  		}

<div region="north" title="各CP数据条件查询选择" style="overflow:hidden;padding:10px;">
    
    <div id="tb" style="padding:3px;height:70px">  
    
  	<span>查询类型</span>
		<select name="querytype" id="querytype" class="easyui-combobox" editable=false panelHeight="auto" style="width:155px;">  
			<option selected='selected' value="0">各CP统计某月份业务量</option>
			<option value="1">各CP各作品业务量统计</option>
		</select>

6：导出按钮

<a href="excel.action" id="searchexport" name="searchexport" value="1" class="easyui-linkbutton" plain="true" iconCls="icon-redo"></a>

excel.action是struts2后台的struts.xml中的配置

<action name="excel" class="com.newsky.action.ExportExcel">
            <result name="success" type="stream">
                <param name="contentType">application/vnd.ms-excel;charset=UTF-8</param>
                <param name="contentDisposition">attachment;filename="DmReport.xls"</param>
                <param name="inputName">inputStream</param>
            </result>
    </action>

7:最重要的是数据表格了

Easyui技术学习，更多知识请访问https://www.itkc8.com