[力軟7.0.6]力軟敏捷開發框架敏捷框架前端API
力軟前端元件 API
目錄
力軟前端元件 API.............................................................................................................. 1
一、時間查詢框........................................................... 2
二、下拉選擇框........................................................... 3
三、資料字典下拉選擇框................................................... 4
四、資料來源下拉選擇框..................................................... 4
五、樹形外掛............................................................. 4
六、獲取表單資料......................................................... 5
七、設定表單資料......................................................... 5
八、驗證表單輸入欄位..................................................... 5
九、彈層外掛............................................................. 6
十、彈層選擇框外掛....................................................... 6
十一、樹型表格選擇框外掛................................................. 6
十二、表格選擇框外掛..................................................... 7
十三、表格外掛........................................................... 8
十四、甘特圖外掛......................................................... 9
一、時間查詢框
方法：$(‘#‘+id).lrdate(op);
引數說明：
|
引數 |
說明 |
預設 |
|
dfdata |
自定義資料 |
[] |
|
mShow |
是否顯示當月按鈕 |
true |
|
premShow |
是否顯示上月按鈕 |
true |
|
jShow |
是否顯示當季度按鈕 |
true |
|
prejShow |
是否顯示上季度按鈕 |
true |
|
ysShow |
是否顯示上半年按鈕 |
true |
|
yxShow |
是否顯示下半年按鈕 |
true |
|
preyShow |
是否顯示去年按鈕 |
true |
|
yShow |
是否顯示今年按鈕 |
true |
|
dfvalue |
預設選擇值 |
未選擇 |
|
selectfn |
選擇後回撥函式 |
false |
|
minDate |
最小日期 |
‘‘ |
|
maxDate |
最大日期 |
‘‘ |
示例：
$(this).lrdate({
dfdata: [
{ name: ‘今天‘,begin: function () { return learun.getDate(‘yyyy-MM-dd
00:00:00‘) },end: function () { return learun.getDate(‘yyyy-MM-dd 23:59:59‘) } },
{ name: ‘近7天‘,begin: function () { return learun.getDate(‘yyyy-MM-dd 00:00:00‘,‘d‘,-6) },end: function () { return learun.getDate(‘yyyy-MM-dd 23:59:59‘) } },
{ name: ‘近1個月‘,begin: function () { return learun.getDate(‘yyyy-MM-dd 00:00:00‘,‘m‘,-1) },end: function () { return learun.getDate(‘yyyy-MM-dd 23:59:59‘) } },
{ name: ‘近3個月‘,-3) },
],
// 月
mShow: false,premShow: false,
// 季度
jShow: false,prejShow: false,
// 年ysShow: false,yxShow: false,
preyShow: false,yShow: false,
// 預設
dfvalue: ‘1‘,
selectfn: function (begin,end) { logbegin = begin;
logend = end; page.search();
}
});
二、下拉選擇框
方法：$(‘#‘+id).lrselect(op);
|
引數 |
說明 |
預設 |
|
placeholder |
佔位符 |
請選擇 |
|
type |
資料展示型別： 1.default：普通；2.tree：樹形資料；3. treemultiple：樹形多選；multiple：普通多選 |
default |
|
value |
資料值欄位名 |
id |
|
text |
資料顯示欄位名 |
text |
|
title |
資料標題欄位名 |
title |
|
maxHeight |
下拉框最大高度 |
200 |
|
width |
下拉框寬度 |
跟隨輸入框寬度 |
|
allowSearch |
是否允許搜尋 |
false |
|
url |
獲取資料地址 |
false |
|
data |
下拉選擇資料 |
false |
|
param |
請求後臺引數 |
Null |
|
method |
請求後臺方法：GET、POST |
GET |
|
select |
選擇後觸發方法 |
false |
示例：
$(‘#customerId‘).lrselect({
url: top.$.rootUrl + ‘/LR_CRMModule/Customer/GetList‘,text: ‘F_FullName‘,
value: ‘F_CustomerId‘,allowSearch: true,maxHeight: 400
});
三、資料字典下拉選擇框
方法：$(‘#‘+id). lrDataItemSelect (op);
|
引數 |
說明 |
預設 |
|
code |
字典編碼 |
|
|
allowSearch |
是否允許搜尋 |
false |
|
select |
選擇後觸發方法 |
false |
示例：
$(‘#F_Process‘).lrDataItemSelect({ code: ‘Process‘ });
四、資料來源下拉選擇框
|
引數 |
說明 |
預設 |
|
value |
資料值欄位名 |
id |
|
text |
資料顯示欄位名 |
text |
|
title |
資料標題欄位名 |
title |
|
maxHeight |
下拉框最大高度 |
200 |
|
width |
下拉框寬度 |
跟隨輸入框寬度 |
|
allowSearch |
是否允許搜尋 |
false |
|
select |
選擇後觸發方法 |
false |
方法：$(‘#‘+id). lrDataSourceSelect (op);
示例：
$(‘#F_text‘).lrDataSourceSelect({ code: ‘userdata‘,
value: ‘f_userid‘,text: ‘f_realname‘ }
);
五、樹形外掛
方法：$(‘#‘+id).lrtree(op);
|
引數 |
說明 |
預設 |
|
method |
請求後臺方法：GET、POST |
GET |
|
url |
請求後臺地址 |
false |
|
param |
請求後臺引數 |
Null |
|
data |
資料[{id, |
[] |
|
text,顯示資料 value,選中值 showcheck,bool,是否顯示多選框 checkstate,int,選中狀態 0 未選中 1 選中 hasChildren,是否有子節點 isexpand,是否展開 complete,資料是否載入完全， ChildNodes,[]}]子節點資料 |
||
|
isAllExpand |
是否所以節點都展開 |
false |
|
nodeClick |
點選事件 |
|
|
nodeCheck |
選中事件 |
|
示例：
$(‘#companyTree‘).lrtree({
url: top.$.rootUrl + ‘/LR_OrganizationModule/Company/GetTree‘,param: { parentId: ‘0‘ },
nodeClick: page.treeNodeClick
});
六、獲取表單資料
方法：$(‘#‘+id). lrGetFormData(keyvalue);
說明：返回資料為 json 資料{id：value，id：value}
七、設定表單資料
方法：$(‘#‘+id). lrSetFormData (json);
說明： json 資料{id：value，id：value}
八、驗證表單輸入欄位
方法：$(‘#‘+id). lrValidform();
說明：成功返回 true，失敗返回 false
九、彈層外掛
方法：learun. layerForm(op)
|
引數 |
說明 |
預設 |
|
Id |
窗體 id |
Null |
|
title |
窗體標題 |
系統視窗 |
|
width |
窗體寬 |
550 |
|
height |
窗體高 |
400 |
|
url |
視窗地址 |
error |
|
btn |
按鈕名稱 |
[‘確認‘,‘關閉‘] |
|
callBack |
第一個按鈕點選回撥函式 |
|
|
maxmin |
窗體是否允許最大最小 |
|
|
end |
窗體關閉後執行 |
十、彈層選擇框外掛
方法:$(‘#‘+id). lrformselect (op)
|
引數 |
說明 |
預設 |
|
placeholder |
佔位符 |
請選擇 |
|
icon |
選擇圖示 |
‘fa-plus‘ |
|
layerUrl |
彈框頁面地址 |
false |
|
layerParam |
向彈出頁面傳遞的引數 |
false |
|
layerUrlW |
彈框寬度 |
600 |
|
layerUrlH |
彈框高度 |
400 |
|
dataUrl |
將選中項 ID 轉換成 text 介面地址 |
null |
|
select |
選擇事件 |
false |
示例：
$(‘#user).lrformselect({
layerUrl: top.$.rootUrl + ‘/LR_OrganizationModule/User/SelectForm‘,layerUrlW: 800,
layerUrlH: 520,
dataUrl: top.$.rootUrl + ‘/LR_OrganizationModule/User/GetListByUserIds‘
});
十一、樹型表格選擇框外掛
方法:$(‘#‘+id). lrlayerselect (op)
|
引數 |
說明 |
預設 |
|
placeholder |
佔位符 |
請選擇 |
|
icon |
選擇圖示 |
‘fa-plus‘ |
|
treeCode |
左側樹資料來源編碼 |
|
|
treeParentId |
樹型資料父級欄位 ID |
|
|
treeValueId |
樹型資料值欄位 ID |
|
|
treeTextId |
樹型資料文字欄位 ID |
|
|
dataCode |
右側列表資料來源編碼 |
|
|
dataTreeId |
左側樹點選節點時觸發指定欄位查詢 |
|
|
dataValueId |
值欄位名 |
|
|
dataTextId |
顯示名稱欄位名 |
|
|
headData |
表格列資料 |
|
|
select |
選擇事件 |
false |
|
isMultiple |
是否允許多選 |
false |
示例：
$(‘#select6‘).lrlayerselect({
treeCode: ‘dataitemc‘,treeParentId: ‘f_parentid‘,treeValueId: ‘f_itemid‘,treeTextId: ‘f_itemname‘,
dataCode: ‘dataitem‘,dataTreeId: ‘f_itemid‘,dataValueId: ‘f_itemdetailid‘,dataTextId: ‘f_itemname‘,
grid: [
{ label: ‘專案名‘,name: ‘f_itemname‘,width: 175,align: ‘left‘ },
{ label: ‘專案值‘,name: ‘f_itemvalue‘,
{ label: "備註",name: "f_description",width: 200,align: "left" }
],
select: function (values,texts) {
}
});
十二、表格選擇框外掛
方法:$(‘#‘+id). lrGirdSelect (op)
|
引數 |
說明 |
預設 |
|
placeholder |
佔位符 |
請選擇 |
|
icon |
選擇圖示 |
‘fa-plus‘ |
|
selectWord |
查詢欄位 |
‘’ |
|
headData |
表格列資料 |
|
|
value |
選擇後得到的值欄位 |
|
|
text |
選擇後顯示的欄位 |
|
|
url |
獲取彈出表格資料的地址 |
|
|
param |
引數 |
null |
|
width |
彈框寬度 |
600 |
|
height |
彈框高度 |
400 |
|
select |
選擇事件 |
false |
示例：
$(‘#select5‘).lrGirdSelect({
// 欄位
url: top.$.rootUrl + ‘/LR_SystemModule/DataItem/GetDetailList‘,param: { itemCode: ‘Client_ProductInfo‘ },
selectWord: ‘F_ItemName‘,value: ‘F_ItemValue‘,
text: ‘F_ItemName‘,
headData: [{ label: "商品編號",name: "F_ItemValue",width: 100,align: "left" },
{ label: "商品名稱",name: "F_ItemName",width: 450,align: "left" }],select: function (item) {
}
});
十三、表格外掛
方法:$(‘#‘+id). jfGrid(op);
|
引數 |
說明 |
預設 |
|
url |
資料服務地址 |
|
|
param |
請求引數 |
|
|
rowdatas |
列表資料 |
|
|
datatype |
資料型別 |
array |
|
headData |
表格列資料 |
|
|
isShowNum |
是否顯示序號 |
true |
|
isMultiselect |
是否允許多選 |
false |
|
multiselectfield |
多選繫結欄位 |
|
|
isSubGrid |
是否有子表 |
false |
|
subGridRowExpanded |
子表展開後回撥函式 |
|
|
subGridHeight |
子表高度 |
|
onSelectRow |
選中一行後回撥函式 |
|
|
onRenderComplete |
表格載入完後呼叫 |
|
|
isPage |
是否分頁 |
false |
|
sidx |
排序欄位 |
‘‘ |
|
sord |
排序方式 |
ASC |
|
isTree |
是否樹形顯示（沒有分頁的情況下才支援） |
false |
|
mainId |
關聯的主鍵 |
id |
|
parentId |
樹形關聯欄位 |
parentId |
|
reloadSelected |
重新整理後是否還選擇之前選中的,只支援單選 |
false |
|
isAutoHeight |
自動適應表格高度 |
false |
|
footerrow |
底部合計條 |
false |
|
isEidt |
是否編輯 |
false |
|
minheight |
最低高度 |
0 |
|
height |
高度 |
0 |
|
onAddRow |
新增一行資料後執行 |
false |
|
onMinusRow |
刪除一行資料後執行 |
false |
|
beforeMinusRow |
刪除一行資料前執行 |
false |
|
ishide |
是否隱藏 |
false |
|
rows |
表格每頁行數 |
100 |
|
isStatistics |
統計條 |
false |
十四、甘特圖外掛
方法:$(‘#‘+id). lrGantt (op)
|
引數 |
說明 |
預設 |
|
url |
資料介面地址 |
|
|
childUrl |
載入子節點引數 |
|
|
data |
載入資料 |
[] |
|
param |
訪問介面引數 |
false |
|
childParam |
子節點引數 |
false |
|
leftWidh |
左邊欄寬度 |
200 |
|
type |
日期顯示維度：month,week,day,hour |
day |
|
timebtns |
時間維度切換按鈕 |
[‘month‘,‘week‘, ‘day‘,‘hour‘] |
|
isAllExpand |
是否全部展開 |
false |
|
isPage |
是否分頁 |
false |
|
click |
單擊事件 |
false |
|
timeClick |
時間段點選事件 |
false |
|
timeDoubleClick |
時間段雙擊事件 |
false |
|
timeHover |
時間段hover 事件，移入移出 |
false |
|
onRenderComplete |
動態載入後臺資料完成後執行事件 |
false |
示例：
$(‘#gridtable‘).lrGantt({
url: top.$.rootUrl + ‘/LR_CodeDemo/GantProject/GetProjectList‘,childUrl: top.$.rootUrl + ‘/LR_CodeDemo/GantProject/GetProjectDetail‘,timebtns: [‘month‘,‘day‘],//‘month‘,‘day‘,‘hour‘
timeClick: function (data,$self) { if (data.item.hasChildren) {
isMain = true;
}
else {
isMain = false;
}
keyValue = data.item.id;
},
timeDoubleClick: function (data,$self) { if (data.item.hasChildren) {
isMain = true;
keyValue,
}
keyValue = data.item.id; if (isMain) {
learun.layerForm({ id: ‘form‘,
title: ‘編輯‘,
url: top.$.rootUrl + ‘/LR_CodeDemo/GantProject/Project?keyValue=‘ +
width: 600,
height: 400,
callBack: function (id) {
return top[id].acceptClick(location.reload());
}
});
}
else {
learun.layerForm({ id: ‘form‘,
url: top.$.rootUrl + ‘/LR_CodeDemo/GantProject/ProjectDetail?keyValue=‘ + keyValue,
width: 600,
callBack: function (id) {
return top[id].acceptClick(location.reload());
}
});
}
},
click: function (item,$item) { if (item.hasChildren) {
isMain = true;
}
else {
isMain = false;
keyValue,
}
keyValue = item.id; if (isMain) {
learun.layerForm({ id: ‘form‘,
url: top.$.rootUrl + ‘/LR_CodeDemo/GantProject/Form?keyValue=‘ +
width: 600,
callBack: function (id) {
return top[id].acceptClick(location.reload());
}
});
}
}
}).lrGanttSet(‘reload‘);