easyUI学习记录
参考链接：http://www.cnblogs.com/Philoo/tag/EasyUI/default.html?page=2
1.引入文件顺序
最基本的使用就是引入easyui.min.js文件，以及其对应的jquery.min.js文件。注意的是jquery-easyui是基于jquery的,因此jquery.min.js文件最好先于easyui.min.js先引入
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/jquery-easyui-1.4/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/jquery-easyui-1.4/themes/icon.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/jquery-easyui-1.4/demo/demo.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.4/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.4/jquery.easyui.min.js"></script>
2.改变panel的位置
step1：引入文件
step2：data-options的style
step3：js方法 注：一定记住将js方法写在$(function(){});中
3.改变filebox的属性
4.combobox加载数据
//正确方案
$('#i_ic_code_sign').combobox({
//从后台获取数据
url:'${pageContext.request.contextPath}/register_queryCode.action',
valueField:'i_code',
textField:'i_name',
panelHeight:'auto'
});
<input id="i_ic_code_sign" class="easyui-combobox" name="i_ic_code" style="width:150px;"/>
//后台
/*=================Action===========================*/
/*查询行业类别*/
public void queryCode(){
List<Category> codeList=categoryService.findAllCode(i_kbn1);
super.writeJson(codeList);
}
注：往前端传的是一个List，这里可以尝试用下List<Map>
<pre name="code" class="javascript">
/*=================Service===========================*/
@Override
public List<Category> findAllCode(String i_kbn) {
return getSession().createQuery("select new Category(i_name,i_code) from Category where i_Kbn='"+i_kbn+"'").list();
}
</pre><pre name="code" class="javascript"><span style="font-size:18px;">注意：当选择多个属性时，Hibernate会将其放入Object数组当中，所以需要特殊处理：即通过构造器完成，同时在Category实体类中需要实现相应的构造器。</span> <span style="font-size:24px;"><span style="color:#FF0000;">注：对于后台传过来的json数据的调用可以启用firebug进行观察和调用。</span> </span>
5.三级联动选项
<pre name="code" class="javascript"><input id="<span style="font-family: Arial, Helvetica, sans-serif;">i_address1_sign</span>" class="easyui-combobox" name="i_ic_code" style="width:150px;"/>
var i_country;
var i_postcode;
/* 级联菜单功能实现*/
$('#i_address1_sign').combobox({
//从后台获取数据
url:'${pageContext.request.contextPath}/register_queryCountry.action',
/* 根据国家选择省市 */
onSelect: function(record){
i_postcode=$('#i_postcode_sign').textbox('getValue');
if((typeof i_postcode)=='undefined'||i_postcode==""){
/* 重新选择的时候将其他相联的清空 */
$('#i_address2_sign').combobox('clear');
$('#i_address2_sign').combobox('loadData','{}');
$('#i_address3_sign').combobox('clear');
$('#i_address3_sign').combobox('loadData','{}');
$('#i_address4_sign').combobox('clear');
$('#i_address4_sign').combobox('loadData','[]');
/* 二级：根据国家查询省份 */
i_country=record.i_country;
var url = '${pageContext.request.contextPath}/register_queryProvice.action?i_address1='+encodeURI(encodeURI(record.i_country));
$('#i_address2_sign').combobox('reload', url);
/* 三级：根据省市查询城市 */
$('#i_address2_sign').combobox({
onSelect:function(record){
if(i_postcode==""){
$('#i_address3_sign').combobox('clear');
$('#i_address3_sign').combobox('loadData','{}');
$('#i_address4_sign').combobox('clear');
$('#i_address4_sign').combobox('loadData','[]');
var url = '${pageContext.request.contextPath}/register_queryCity.action?i_address2='+encodeURI(encodeURI(record.i_province));
$('#i_address3_sign').combobox('reload', url);
$('#i_address3_sign').combobox({
/* 四级：根据城市查询区县 */
onSelect: function(record){
var url = '${pageContext.request.contextPath}/register_queryDistrict.action?i_address3='+encodeURI(encodeURI(record.i_city));
$('#i_address4_sign').combobox('reload', url);
}
});
}
}
});
}
else{
/* 当邮编非空时根据国家和邮编查询得出对应的省市区 */
i_postcode=$('#i_postcode_sign').textbox('getValue');
$('#i_address2_sign').combobox('clear');
$('#i_address2_sign').combobox('loadData','[]');
$('#i_address3_sign').combobox('clear');
$('#i_address3_sign').combobox('loadData','[]');
$('#i_address4_sign').combobox('clear');
$('#i_address4_sign').combobox('loadData','[]');
var url = '${pageContext.request.contextPath}/register_getByCountryAndCode.action?i_address1='+encodeURI(encodeURI(record.i_country))+'&i_postcode='+encodeURI(i_postcode);
$('#i_address2_sign').combobox('reload', url);
$('#i_address3_sign').combobox('reload', url);
$('#i_address4_sign').combobox('reload', url);
}
}});
$('#i_postcode_sign').textbox({
onChange:function(newValue,oldValue){
i_postcode=newValue;
if(i_country!=""){
var link = '${pageContext.request.contextPath}/register_getByCountryAndCode.action?i_address1='+encodeURI(encodeURI(i_country))+'&i_postcode='+encodeURI(newValue);
$('#i_address2_sign').combobox('reload', link);
$('#i_address3_sign').combobox('reload', link);
$('#i_address4_sign').combobox('reload', link);
}
}
});
6.在两个页面之间传多个值
假设a.jsp中存在一个linkbutton，b.jsp中存在一个表单需要加载a.jsp中表单的数据。那么a.jsp和b.jsp之间的传值的解决方案：http://blog.csdn.net/f_zhuimeng/article/details/5959042，在本次试验中我采取的是通过session进行传递。
6.1 通过Linkbutton 提交表单
<a id="nextStep" href="#" class="easyui-linkbutton" >下一步</a>
/* 下一步按钮的触发的check事件 */
$('#nextStep').linkbutton({
onClick:function(){
/* 提交表单 */
$('#registerForm').submit();
}
});
注：registerForm为提交的表单，name属性要和model中的字段对应才能够自动封装
那么在后台就可以通过model获取表单的值：
/*后台代码：显示确认审批页面，并且将表单值提交到去*/
public String assureUI(){
ServletActionContext.getRequest().getSession().setAttribute("company", model);
return "assure";
}
但是对于用户的每次访问，session仅通过其sessionID进行识别，如果在访问中有对session的多个引用，并且在引用时对session中的值进行了修改，那么session中的此属性也会进行相应的更改。
http://blog.csdn.net/tangzenglei/article/details/49301403
6.2 通过form的load的方法自动获取数据
前台页面
$('#assureForm').form('load','${pageContext.request.contextPath}/register_loadData.action');
注：这里的assureForm为表单的id，name属性要和model中的字段对应后台：
/*加载数据到assureUI*/
public void loadData(){
Company company=(Company) ServletActionContext.getRequest().getSession().getAttribute("company");
super.writeJson(company);
}
7.日期控件
参考资料：http://www.cnblogs.com/libingql/archive/2011/09/25/2189977.html
8.datagrid
重点：数据的传输：后台向后台的传输可以运用List<map<key,value>>集合进行操作。
后台：
List<Map<String, Object>> rows=new ArrayList<Map<String,Object>>();
DataGrid dataGrid=new DataGrid();
List<String[]> result=null;
result=tRelationService.findbyCompanyId(i_company_id, i_kbn3,i_tab_name);
if(result!=null){
for(int i=0;i<result.size();i++){
Map<String, Object> row = new HashMap<String, Object>();
row.put("i_group",(String)((Object[])result.get(i))[0]);
row.put("i_company_name",(String)((Object[])result.get(i))[1]);
row.put("i_address",(String)((Object[])result.get(i))[2]);
row.put("i_scale",(String)((Object[])result.get(i))[3]);
row.put("i_company_id",String.valueOf(((Object[])result.get(i))[4]));
rows.add(row);
}
dataGrid.setTotal(Long.valueOf(result.size()));
}
dataGrid.setRows(rows);
super.writeJson(dataGrid);
serviceImpl.java
@Override
public List<String[]> findbyCompanyId(String i_company_id, String i_kbn,String i_tab_name) {
String sql="select * from ( ";
sql=sql+"select r.i_motion_tab,c.i_company_name,c.i_address3,g.I_name,c.i_company_id from t_Relationship r ";
sql=sql+" left join M_company c on r.i_confirm_id=c.i_company_id ";
sql=sql+"left join M_category g on g.i_code=c.i_cs_code ";
sql=sql+"where r.i_motion_id='"+i_company_id+"' and g.i_kbn='"+i_kbn+"' and r.i_status='1' ";
if(i_tab_name!=null){
sql=sql+" and r.i_confirm_tab like '%"+i_tab_name+"%' ";
}
sql=sql+"union ";
sql=sql+"select r.i_confirm_tab,c.i_company_name,c.i_address3,g.I_name,c.i_company_id from t_Relationship r ";
sql=sql+"left join M_company c on r.i_motion_id=c.i_company_id ";
sql=sql+"left join M_category g on g.i_code=c.i_cs_code ";
sql=sql+"where r.i_confirm_id='"+i_company_id+"' and g.i_kbn='"+i_kbn+"' and r.i_status='1' ";
if(i_tab_name!=null){
sql=sql+" and r.i_confirm_tab like '%"+i_tab_name+"%' ";
}
sql=sql+") temp order by temp.i_company_id";
Query query=getSession().createSQLQuery(sql);
if((!"".equals(i_company_id))&&(!"".equals(i_kbn))){
@SuppressWarnings("unchecked")
List<String[]> list=query.list();
if(list.isEmpty()){
return null;
}
return list;
}
return null;
}
前台
<div id="partnerListDiv"> <table id="partnerListTable"></table> </div>
js函数
/* 加载数据到表格 */
$('#partnerListTable').datagrid({
url:'${pageContext.request.contextPath}/partner_findAll.action',
striped:true,
pagination:true,
singleSelect:true,
border: true,
resizeHandle:'right',//设置可操作的位置
columns:[[
{field:'i_group',title:'所属分组',width:240,align:'left'},
{field:'i_company_name',title:'公司全称',width:200,align:'left'},
{field:'i_address',title:'公司地址',width:200,align:'left'},
{field:'i_scale',title:'公司规模',width:150,align:'left'},
{field:'edit',title:'',width:70,align:'center',
formatter: function(value,row,index){
return '<a href=\'#\' onclick=\"showEdit(\''+row.i_company_id+'\',\''+row.i_company_name+'\',\''+row.i_group+'\')\">修改分组</a>';
}
},
{field:'detail',title:'',width:70,align:'center',
formatter: function(value,row,index){
return '<a href=\'#\' onclick=\"showDetail(\''+row.i_company_id+'\')\">详情</a>';
}
}
]]
});
注意，前端对两个链接定义了onclcik事件，这里运用到的字符串拼接需要注意。
9.根据数据生成标签
效果图
jQuery代码：
var json;//方便共享
var save;//需要保持的标签id
var companyId;
var companyName;
var companyGroup;
function showEdit(i_company_id,i_company_name,i_group){
$('#partnerUpdate').dialog({
title: '修改分组页面',
left:300,
top:100,
width: 400,
height: 310,
closed: false,
cache: false,
modal: true
});
if((typeof i_company_name!='undefined')&&i_company_name!='undefined'){
$('#i_company_name_update').val(i_company_name);//给公司全称赋值
}
if((typeof i_group!='undefined')&&i_group!='undefined'){
$('#i_group_update').val(i_group);//给 所属分组赋值
}
if((typeof i_company_id!='undefined')&&i_company_id!='undefined'){
$('#i_company_id_update').val(i_company_id);//给所属分组赋值
}
/* 试验 */
/* var root=document.getElementById("joinedGroup")
root.innerHTML="<td id='test'>ce</td>";
$("#test").linkbutton({
plain:true,
toggle:true
}); */
/* 制作所属分组动态效果 */
/* 试验 */
/* 从M_TAB中动态获取所有分组标签 */
companyId=i_company_id;
companyName=i_company_name;
companyGroup=i_group;
getTabs(i_company_id);
}
<pre name="code" class="javascript">/* 从M_TAB中动态获取所有分组标签 */
function getTabs(i_company_id){
$.ajax({
type:"post",
url:'${pageContext.request.contextPath}/partner_getTabs.action',
datatype:"json",
async: false,
cache:false,
success:function(data){
json=jQuery.parseJSON(data);
var arr=getSelectedTabs(i_company_id);
save=arr.concat().join(" ");//保存的标签的id
/* alert(save.join(" ")); */
var tr=document.createElement("tr");
for(var i=0; i<json.length; i++){
var root=document.getElementById("joinedGroup");
var a=document.createElement("a");
var td=document.createElement("td");
a.innerHTML=json[i].iTabName;
a.href="#";
/* a.setAttribute('class', 'easyui-tooltip'); */
a.id=json[i].id.iTabId;
td.appendChild(a);
td.setAttribute('style', 'border:1px dashed #000000;border-radius:5px;');
tr.appendChild(td);
root.appendChild(tr);
/* 最后改变样式,否则不起作用 */
$("#"+a.id).linkbutton({
plain:true,
toggle:true
});
for(var j=0;j<arr.length;j++){
if(a.id==arr[j]){
$("#"+a.id).linkbutton('options').selected=true;
/* var id=$("#iTabIdHidden").val()+" ";
$("#iTabIdHidden").val(id+a.id); *///将当前的所属分组的id记录下来
}
}
/* 设置按钮的大小 */
$("#"+a.id).linkbutton('resize',{
width: '60',
height: 30
});
/* 绑定添加文本 */
$("#"+a.id).linkbutton({
onClick:function(){
var val=$.trim($('#i_group_update').val());//获取文本框中的值，并作为备份
var flag=$(this).linkbutton('options').selected;
var append=" "+$(this).linkbutton('options').text;
var appendId=$(this).linkbutton('options').id+" ";
/* var ids=" "+$('#iTabIdHidden').val(); *///记录iTabIds
if(false==flag){
val=val.replace(append,"");
$('#i_group_update').val(val);
/* ids=ids.replace(appendId,""); */
save=save.replace(appendId,"");
/* $('#iTabIdHidden').val(ids); */
}else{
$('#i_group_update').val(val+append);
save=save+" "+appendId;
/* $('#iTabIdHidden').val(ids+appendId); */
}
}
});
/* 每四个button生成转一行 */
if((i+1)%4==0){
tr=document.createElement("tr");
root.appendChild(tr);
}
}
getSelectedTabs(i_company_id);
},
error:function(XMLHttpRequest,textStatus,errorThrown){
alert(XMLHttpRequest.status);
}
});
}
/* 从M_group中动态获取已存在的关系标签 */
function getSelectedTabs(i_company_id){
var array=new Array();
$.ajax({
type:"post",
url:'${pageContext.request.contextPath}/partner_getSelectedTabs.action',
data:{i_target_id:i_company_id},
datatype:"json",
async: false,
success:function(data){
selected=jQuery.parseJSON(data);
for(var i=0; i<json.length; i++){
for(var j=0;j<selected.length;j++){
if(selected[j].iTabId==json[i].id.iTabId){
/* $("#"+json[i].id.iTabId).linkbutton('options').selected=true; */
array.push(json[i].id.iTabId);
}
}
}
},
error:function(XMLHttpRequest,textStatus,errorThrown){
alert(XMLHttpRequest.status);
}
});
return array;
}
/* 保存更新操作 */
function update(iTabIds,i_group,i_company_id){
$.ajax({
type:"post",
url:'${pageContext.request.contextPath}/partner_updateSave.action',
data:{"i_company_id":i_company_id,"i_group":i_group,"iTabIds":iTabIds},
datatype:"json",
async: false,
success:function(){
alert(getErrorMessage('30001'));//提示：保存成功
$('#partnerUpdate').dialog('refresh');//刷新panel
$('#partnerUpdate').dialog('close');//关闭修改页面
$('#partnerListTable').datagrid('reload');//刷新整个表格
},
error:function(XMLHttpRequest,textStatus,errorThrown){
alert("保存失败,请重新选择分组");
}
});
}