前台EasyUI哪些事一

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标签的iddocument.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，所以加1var 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

前台EasyUI哪些事一相关推荐

ASP.NET MVC+EF框架+EasyUI实现权限管理系列(13)-权限设计
原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(13)-权限设计 ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇) (1):框架搭建 (2):数据 ...
java maven导入导出_Java +EasyUI+SpringMvc实现Excle导入导出(上)
标签: 前言先介绍下项目的开发环境,采用java开发语言进行开发,前台UI使用的是EasyUI框架,接下来是SpringMvc与Ejb结合来开发,整个项目管理采用的是Maven管理,服务器用的是Jb ...
刚弄好的中台！又要开始拆了？难道是为了凑工作量？
作者 | Mr.K 整理| Emma 来源 | 技术领导力(ID:jishulingdaoli) 老K独家了解到,张勇近期在阿里内网发布文章表示,他对目前阿里的中台并不满意,他直言道,现在阿里的业 ...
SpringMVC+Spring3+Hibernate4
2019独角兽企业重金招聘Python工程师标准>>> 1.简单的SpringMVC+Spring3+Hibernate4开发环境见https://github.com/Spacey ...
宅急送项目第二天笔记！
一. 项目前台 easyui 基于jquery 的一套ui类库 1. 直接编写html,为html元素设置class属性 ----- 自动被easyui 进行渲染 2. 编写js脚本代码,生成页面 ...
为什么IT行业仍然这么火？
编辑点评:IT行业,虽然现在有时会被戏称为"IT民工",但是IT行业巨大的人才需求和相对容易得到的高薪还是吸引着大量的理科学子.在经历了十年的告诉发展后,IT行业还是潜力满满吗?专 ...
CSDN开发者周刊第 22期：谷歌 DeepMind 第四代：不学规则就可以玩游戏；图灵奖得主 Edmund Clarke 因感染“新冠”逝世；
CSDN开发者周刊:只为传递"有趣/有用"的开发者内容! 本周热门项目 1.红帽为杀死 CentOS 发行版辩护红帽公司的高级社区架构师.CentOS 董事会成员卡斯滕-韦德(K ...
图片上传功能（EasyUI前台框架+SSM框架）
文件上传步骤: * 1.采用文件正确的接收方式(修改3处配置文件/接口类型等) * 2.判断是否为一个图片,0表示无异常,1代表异常(jpg|gif|png) * 3.判断是不是一个"正经& ...
EasyUI上传图片，前台预览，后台读取
背景 Spring MVC + EasyUI 前台上传图片,并预览下面是jsp的内容,form表单 java <form id="upload_form" enctype= ...

前台EasyUI哪些事一

前台EasyUI哪些事一相关推荐

最新文章

热门文章