專題開發(fā)十三：JEECG微云快速開發(fā)平臺-附錄

12.1UI庫常用控件參考示例

序號	控件	解決方案	參考示例
1	datagrid數(shù)據(jù)列表，字段采用數(shù)據(jù)字典顯示文本	<t:dgCol title="狀態(tài)" sortable="true" field="status" replace="正常_1,禁用_0,超級管理員_-1"></t:dgCol>	WebRoot/webpage/system/user/userList.jsp
2	樹列表展現(xiàn)	?	參考示例[菜單管理]：WebRoot/webpage/system/function/functionList.jsp
3	POPUP實(shí)現(xiàn)	<t:choose hiddenName="roleid" hiddenid="id" url="userController.do?roles" name="roleList" icon="icon-choose" title="角色列表" textname="roleName" isclear="true"></t:choose>	/WebRoot/webpage/system/user/user.jsp
4	下拉菜單實(shí)現(xiàn)	?	WebRoot/webpage/system/user/user.jsp
5	radio控件	?	WebRoot/webpage/system/user/user.jsp
6	數(shù)據(jù)列表展示	?	WebRoot/webpage/system/user/userList.jsp
7	常用組件DEMO地址	上傳/表單驗(yàn)證/Excel導(dǎo)入/Excel導(dǎo)出/ 頁面不同彈出方式/樹界面展示/自動補(bǔ)全/一對多示例/tabs切換	/WebRoot/webpage/demo/*
8	下拉菜單多級聯(lián)動	?	?
9	一對多明細(xì)行加下拉項(xiàng)	? ?	?
10	datagrid數(shù)據(jù)列表，時間字段格式化	? ?	?
11	數(shù)據(jù)行全選	?	?
12	重復(fù)校驗(yàn)	?	?

12.2開發(fā)技巧：采用IFrame打開頁面

目前在JEECG開發(fā)平臺中，為了提高easyui的性能，tab的打開采用href方式，但是href方式存在如下問題：

?1.href只加載目標(biāo)URL的html片段

? 這個特性是由jQuery封裝的ajax請求處理機(jī)制所決定的，所以目標(biāo)URL頁面里不需要有html，

?head,body等標(biāo)簽，即使有這些元素，也會被忽略，所以放在head標(biāo)簽里面的任何腳本也不會被引入或者執(zhí)行。

?2.短暫的頁面混亂：

?href鏈接的頁面比較復(fù)雜的時候，easyui對其渲染往往需要一個較長的過程

當(dāng)加載的頁面布局較為復(fù)雜，或者有較多的js腳本需要運(yùn)行的時候，就不好處理了。

?所以，綜合考慮，如果頁面樣式、js簡單就采用系統(tǒng)默認(rèn)的href方式打開tab頁。

如果頁面復(fù)雜，不好拆分，則采用 iframe方式打開tab。采用ifrme方式，需要在配置菜單的時候，加上&isIframe標(biāo)識，如下所示:

dataSourceController.do?goDruid&isIframe 需要注意：改為iframe方式的頁面需要在head中追加： <t:base type="ckeditor,jquery,easyui,tools"></t:base>

12.3開發(fā)技巧：組合查詢實(shí)現(xiàn)方法

簡述：代碼生成器默認(rèn)生成的查詢方式為單字段查詢，如果想實(shí)現(xiàn)字段組合查詢，需要采用如下方式。

實(shí)現(xiàn)步驟：

第一步：設(shè)置dategrid字段查詢屬性query="true"

第二步：對應(yīng)query="true"的dategrid字段設(shè)置查詢字段組件

<input type="text" name="userName" id="userName" style="width: 80px"/>

第三步：設(shè)置查詢按鈕

<a href="#" class="easyui-linkbutton" iconCls="icon-search" οnclick="userListsearch()">查詢</a>

注意點(diǎn)：

1.這種寫法t:dgToolBar這個標(biāo)簽不能使用，不然會有沖突，查詢form顯示不出來;

2.查詢函數(shù)的名字規(guī)則"[dategrid組件name]search()"

[1].dategrid組件name

<t:dategrid name="userMe"

[2].組合查詢DIV

<div id="userMetb"

[3].查詢按鈕對應(yīng)的js方法

<a href="#" class="easyui-linkbutton" iconCls="icon-search" οnclick="userMesearch()">查詢</a>

參考示例：/WebRoot/webpage/system/user/userList.jsp

示例代碼如圖12?1

12.4Formvalid新增屬性tiptype的使用

Formvalid中的tiptype用來定義提示信息的顯示方式，一共有4種取值，在其官方的說明中，不同取值的含義如下：

取值	含義
1	自定義彈出框提示；
2	側(cè)邊提示(會在當(dāng)前元素的父級的next對象的子級查找顯示提示信息的對象，表單以ajax提交時會彈出自定義提示框顯示表單提交狀態(tài))；
3	側(cè)邊提示(會在當(dāng)前元素的siblings對象中查找顯示提示信息的對象，表單以ajax提交時會彈出自定義提示框顯示表單提交狀態(tài))；
4	側(cè)邊提示(會在當(dāng)前元素的父級的next對象下查找顯示提示信息的對象，表單以ajax提交時不顯示表單的提交狀態(tài))

在jeecg中，tiptype的屬性配置代碼如下：

<t:formvalid formid="formobj" dialog="true" usePlugin="password" layout="table"tiptype="1" action="jeecgOrderMainController.do?save">

與官方的用法不同的是，JEECG中對取值為1時的樣式以及校驗(yàn)方式進(jìn)行了改造，官方版是在提交時才給出提示，而JEECG中是在onblur的時候就會提示，當(dāng)輸入正確后，1秒中后會自動消失。

注：<t:formvalid>標(biāo)簽中不寫tiptype時默認(rèn)為4.即側(cè)邊顯示。

使用建議：單表可以不用給定tiptype屬性，即使用默認(rèn)的側(cè)邊校驗(yàn)，主從表的數(shù)據(jù)校驗(yàn)給定tiptype="1"。

單表和主從表的數(shù)據(jù)校驗(yàn)提示效果分別如圖12?2和圖12?3所示。

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 12-2

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?12-3

12.5使用toolbar 自定義js?參數(shù)規(guī)則

第一步：定義按鈕

<t:dgToolBar title="JS增強(qiáng)"icon="icon-edit" url="cgFormHeadController.do?jsPlugin"funname="jsPlugin"></t:dgToolBar>

?

第二步：定義js方法

?

三個參數(shù)說明：

1.三個參數(shù)缺一不可

2.三個參數(shù)順序不能變

3.有且只有三個參數(shù)

4.id為datagrid的name屬性

?

function jsPlugin(title,url,id){

var rowData = $('#'+id).datagrid('getSelected');

if (!rowData) {

tip('請選擇編輯項(xiàng)目');

return;

}

url += '&id='+rowData.id;

?????????????????$.dialog({

content: "url:"+url,

lock : true,

title:"JS增強(qiáng)編輯["+rowData.tableName+"-"+rowData.content+"]",

opacity : 0.3,

width:900,

height:500,

cache:false,

??? ok: function(){

iframe = this.iframe.contentWindow;

???????????iframe.goForm();

return false;

},

???cancelVal: '關(guān)閉',

??? cancel: true /*為true等價于function(){}*/

});

}

12.6表單字段重復(fù)校驗(yàn)方法

目的：實(shí)現(xiàn)通用表單字段重復(fù)校驗(yàn)，

?

例如:部門管理模塊，部門名稱重復(fù)校驗(yàn)

????? <inputname="departname" class="inputxt" value="${depart.departname}" validType="t_s_depart,departname,id"datatype="s3-10">

?????

? 1）代碼配置

????? 給input標(biāo)簽，增加validType屬性，格式如：t_s_depart,departname,id即（數(shù)據(jù)表名稱、對應(yīng)的數(shù)據(jù)庫字段、業(yè)務(wù)實(shí)體的隱藏域主鍵的Id屬性）

? 2）消息提示方式，兩種方式

? [1].提示彈出層：如下所示：給t:formvalid? 增加tiptype="1" 屬性

????? <t:formvalidformid="formobj" tiptype="1"layout="table"…

? [2].提示信息在文本框后面提示

不需要給t:formvalid 增加任何屬性。

總結(jié)

以上是生活随笔為你收集整理的专题开发十三：JEECG微云快速开发平台-附录的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。