前台EasyUI哪些事一

最近在公司做用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:最重要的是数据表格了