力软前端组件 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个月‘, begin: function () { return learun.getDate(‘yyyy-MM-dd 00:00:00‘, ‘m‘, -3) }, end: function () { return learun.getDate(‘yyyy-MM-dd 23:59:59‘) } },
],
// 月
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,bool,是否有子节点 isexpand,bool,是否展开 complete,bool,数据是否加载完全， 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‘, width: 175, align: ‘left‘ },
{ 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‘, ‘week‘, ‘day‘],//‘month‘, ‘week‘, ‘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‘,
title: ‘编辑‘,
url: top.$.rootUrl + ‘/LR_CodeDemo/GantProject/ProjectDetail?keyValue=‘ + keyValue,
width: 600,
height: 400,
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‘,
title: ‘编辑‘,
url: top.$.rootUrl + ‘/LR_CodeDemo/GantProject/Form?keyValue=‘ +
width: 600,
height: 400,
callBack: function (id) {
return top[id].acceptClick(location.reload());
}
});
}
}
}).lrGanttSet(‘reload‘);