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

12.1UI庫常用控件參考示例

序號	控件	解決方案	參考示例
1	datagrid數據列表，字段采用數據字典顯示文本	<t:dgCol title="狀態" sortable="true" field="status" replace="正常_1,禁用_0,超級管理員_-1"></t:dgCol>	WebRoot/webpage/system/user/userList.jsp
2	樹列表展現	?	參考示例[菜單管理]：WebRoot/webpage/system/function/functionList.jsp
3	POPUP實現	<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	下拉菜單實現	?	WebRoot/webpage/system/user/user.jsp
5	radio控件	?	WebRoot/webpage/system/user/user.jsp
6	數據列表展示	?	WebRoot/webpage/system/user/userList.jsp
7	常用組件DEMO地址	上傳/表單驗證/Excel導入/Excel導出/ 頁面不同彈出方式/樹界面展示/自動補全/一對多示例/tabs切換	/WebRoot/webpage/demo/*
8	下拉菜單多級聯動	?	?
9	一對多明細行加下拉項	? ?	?
10	datagrid數據列表，時間字段格式化	? ?	?
11	數據行全選	?	?
12	重復校驗	?	?

12.2開發技巧：采用IFrame打開頁面

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

?1.href只加載目標URL的html片段

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

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

?2.短暫的頁面混亂：

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

當加載的頁面布局較為復雜，或者有較多的js腳本需要運行的時候，就不好處理了。

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

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

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

12.3開發技巧：組合查詢實現方法

簡述：代碼生成器默認生成的查詢方式為單字段查詢，如果想實現字段組合查詢，需要采用如下方式。

實現步驟：

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

第二步：對應query="true"的dategrid字段設置查詢字段組件

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

第三步：設置查詢按鈕

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

注意點：

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

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

[1].dategrid組件name

<t:dategrid name="userMe"

[2].組合查詢DIV

<div id="userMetb"

[3].查詢按鈕對應的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	側邊提示(會在當前元素的父級的next對象的子級查找顯示提示信息的對象，表單以ajax提交時會彈出自定義提示框顯示表單提交狀態)；
3	側邊提示(會在當前元素的siblings對象中查找顯示提示信息的對象，表單以ajax提交時會彈出自定義提示框顯示表單提交狀態)；
4	側邊提示(會在當前元素的父級的next對象下查找顯示提示信息的對象，表單以ajax提交時不顯示表單的提交狀態)

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

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

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

注：<t:formvalid>標簽中不寫tiptype時默認為4.即側邊顯示。

使用建議：單表可以不用給定tiptype屬性，即使用默認的側邊校驗，主從表的數據校驗給定tiptype="1"。

單表和主從表的數據校驗提示效果分別如圖12?2和圖12?3所示。

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

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

12.5使用toolbar 自定義js?參數規則

第一步：定義按鈕

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

?

第二步：定義js方法

?

三個參數說明：

1.三個參數缺一不可

2.三個參數順序不能變

3.有且只有三個參數

4.id為datagrid的name屬性

?

function jsPlugin(title,url,id){

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

if (!rowData) {

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

return;

}

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

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

content: "url:"+url,

lock : true,

title:"JS增強編輯["+rowData.tableName+"-"+rowData.content+"]",

opacity : 0.3,

width:900,

height:500,

cache:false,

??? ok: function(){

iframe = this.iframe.contentWindow;

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

return false;

},

???cancelVal: '關閉',

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

});

}

12.6表單字段重復校驗方法

目的：實現通用表單字段重復校驗，

?

例如:部門管理模塊，部門名稱重復校驗

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

?????

? 1）代碼配置

????? 給input標簽，增加validType屬性，格式如：t_s_depart,departname,id即（數據表名稱、對應的數據庫字段、業務實體的隱藏域主鍵的Id屬性）

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

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

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

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。