You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
365 lines
10 KiB
365 lines
10 KiB
3 years ago
|
@{
|
||
|
|
ViewData["Title"] = "TreeSelectIndex";
|
||
|
|
Layout = "~/Views/Shared/_Index.cshtml";
|
||
|
|
}
|
||
|
|
<style>
|
||
|
|
.form-warp {
|
||
|
|
position: relative;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
padding-left: 180px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-warp-left {
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
top: 0;
|
||
|
|
width: 180px;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tree {
|
||
|
|
position: relative;
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
border-right: 1px solid #ddd;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-warp-main {
|
||
|
|
position: relative;
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
padding-top: 28px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.item-search {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 28px;
|
||
|
|
border-bottom: 1px solid #ddd;
|
||
|
|
}
|
||
|
|
|
||
|
|
.item-list {
|
||
|
|
position: relative;
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-warp-right {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
right: -180px;
|
||
|
|
height: 100%;
|
||
|
|
width: 180px;
|
||
|
|
border-left: 1px solid #ddd;
|
||
|
|
padding-top: 28px;
|
||
|
|
background-color: #fff;
|
||
|
|
z-index: 10;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-warp-right-close {
|
||
|
|
position: absolute;
|
||
|
|
top: 7px;
|
||
|
|
right: 4px;
|
||
|
|
width: 12px;
|
||
|
|
height: 13px;
|
||
|
|
display: block;
|
||
|
|
background: url(/img/tab_close.png) no-repeat;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-warp-right-close:hover {
|
||
|
|
background-position: 0 -12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-warp-right-title {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
height: 28px;
|
||
|
|
line-height: 27px;
|
||
|
|
padding-left: 10px;
|
||
|
|
width: 100%;
|
||
|
|
border-bottom: 1px solid #ddd;
|
||
|
|
padding-right: 80px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.selected-item-list-warp {
|
||
|
|
position: relative;
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.item-selected-btn {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
right: 0;
|
||
|
|
height: 100%;
|
||
|
|
width: 80px;
|
||
|
|
line-height: 27px;
|
||
|
|
text-align: center;
|
||
|
|
border-left: 1px solid #ddd;
|
||
|
|
cursor: pointer;
|
||
|
|
background-color: #eee;
|
||
|
|
color: #666;
|
||
|
|
}
|
||
|
|
|
||
|
|
.item-selected-btn:hover {
|
||
|
|
color: #333;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-control {
|
||
|
|
border: 0px;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.input-query {
|
||
|
|
position: absolute;
|
||
|
|
right: 86px;
|
||
|
|
top: 2px;
|
||
|
|
color: #ccc;
|
||
|
|
font-size: 16px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.item-selected-box {
|
||
|
|
position: relative;
|
||
|
|
width: 160px;
|
||
|
|
height: 30px;
|
||
|
|
border: 1px solid #ccc;
|
||
|
|
border-radius: 2px;
|
||
|
|
margin: auto;
|
||
|
|
margin-top: 10px;
|
||
|
|
padding: 5px 0 0 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.item-selected-box p {
|
||
|
|
overflow: hidden;
|
||
|
|
white-space: nowrap;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.item-reomve {
|
||
|
|
position: absolute;
|
||
|
|
top: 2px;
|
||
|
|
right: 2px;
|
||
|
|
width: 12px;
|
||
|
|
height: 13px;
|
||
|
|
display: block;
|
||
|
|
background: url(/img/tab_close.png) no-repeat;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.item-reomve:hover {
|
||
|
|
background-position: 0 -12px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<div class="form-warp">
|
||
|
|
<div class="form-warp-left">
|
||
|
|
<div class="tree" id="tree"></div>
|
||
|
|
</div>
|
||
|
|
<div class="form-warp-main">
|
||
|
|
<div class="item-search">
|
||
|
|
<input id="txt_keyword" type="text" class="form-control" placeholder="请输入要查询关键字">
|
||
|
|
<span class="input-query" title="Search"><i class="fa fa-search"></i></span>
|
||
|
|
<div class="item-selected-btn" id="item_selected_btn">已选项</div>
|
||
|
|
</div>
|
||
|
|
<div class="item-list"><div id="gridtable"></div></div>
|
||
|
|
</div>
|
||
|
|
<div class="form-warp-right" id="form_warp_right">
|
||
|
|
<div class="form-warp-right-title">已选项<span class="form-warp-right-close" id="item_selected_btn_close" title="关闭"></span></div>
|
||
|
|
<div class="selected-item-list-warp">
|
||
|
|
<div id="selected_item_list"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
var dfopid = request('dfopid');
|
||
|
|
var acceptClick;
|
||
|
|
var bootstrap = function ($, learun) {
|
||
|
|
"use strict";
|
||
|
|
var selectItem;
|
||
|
|
|
||
|
|
var gridData = null;
|
||
|
|
var op = null;
|
||
|
|
var treeValue = '';
|
||
|
|
|
||
|
|
var selectData = {};
|
||
|
|
|
||
|
|
var page = {
|
||
|
|
init: function () {
|
||
|
|
page.bind();
|
||
|
|
},
|
||
|
|
bind: function () {
|
||
|
|
op = top.lrlayerSelect[dfopid];
|
||
|
|
|
||
|
|
var _value = op._value.split(',');
|
||
|
|
var _text = op._text.split(',');
|
||
|
|
$.each(_value, function (_index, _item) {
|
||
|
|
if (_item != "") {
|
||
|
|
selectData[_item] = _text[_index] || '';
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// 初始化表格
|
||
|
|
$('#gridtable').jfGrid({
|
||
|
|
headData: op.grid,
|
||
|
|
isMultiselect: op.isMultiple,
|
||
|
|
mainId: op.dataValueId,
|
||
|
|
multiselectfield:'lrcheck',
|
||
|
|
onSelectRow: function (data, isCheck) {
|
||
|
|
page.setSelect(data, isCheck);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// 设置树形数据
|
||
|
|
learun.clientdata.getAllAsync('sourceData', {
|
||
|
|
code: op.treeCode,
|
||
|
|
callback: function (_data) {
|
||
|
|
var treeData = $.lrtree.listTotree(_data, op.treeParentId, op.treeValueId, op.treeTextId, op.treeValueId, false);
|
||
|
|
$('#tree').lrtree({
|
||
|
|
data: treeData,
|
||
|
|
nodeClick: function (item) {
|
||
|
|
treeValue = item.value;
|
||
|
|
page.search("");
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
// 获取表格数据
|
||
|
|
learun.clientdata.getAllAsync('sourceData', {
|
||
|
|
code: op.dataCode,
|
||
|
|
callback: function (_data) {
|
||
|
|
//gridData = _data;
|
||
|
|
gridData = [];
|
||
|
|
var $list = $('#selected_item_list');
|
||
|
|
|
||
|
|
$.each(_data, function (_index, _item) {
|
||
|
|
if (selectData[_item[op.dataValueId]]) {
|
||
|
|
selectData[_item[op.dataValueId]] = _item[op.dataTextId];
|
||
|
|
_item.lrcheck = 1;
|
||
|
|
|
||
|
|
var _html = '<div class="item-selected-box" data-value="' + _item[op.dataValueId] + '" >';
|
||
|
|
_html += '<p><span>' + _item[op.dataTextId] + '</span></p>';
|
||
|
|
_html += '<span class="item-reomve" title="移除选中项"></span>';
|
||
|
|
_html += '</div>';
|
||
|
|
$list.append($(_html));
|
||
|
|
} else {
|
||
|
|
_item.lrcheck = 0;
|
||
|
|
}
|
||
|
|
gridData.push(_item);
|
||
|
|
});
|
||
|
|
|
||
|
|
$('#gridtable').jfGridSet('refreshdata', _data);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// 搜索框初始化
|
||
|
|
$('#txt_keyword').on("keypress", function (e) {
|
||
|
|
if (event.keyCode == "13") {
|
||
|
|
var $this = $(this);
|
||
|
|
var keyword = $this.val();
|
||
|
|
page.search(keyword);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
$('.input-query').on('click', function () {
|
||
|
|
var keyword = $('#txt_keyword').val();
|
||
|
|
page.search(keyword);
|
||
|
|
});
|
||
|
|
|
||
|
|
// 已选项
|
||
|
|
if (op.isMultiple) {
|
||
|
|
$('#item_selected_btn').on('click', function () {
|
||
|
|
$('#form_warp_right').animate({ right: '0px' }, 300);
|
||
|
|
});
|
||
|
|
$('#item_selected_btn_close').on('click', function () {
|
||
|
|
$('#form_warp_right').animate({ right: '-180px' }, 300);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$('#item_selected_btn').remove();
|
||
|
|
$('.input-query').css('right','10px');
|
||
|
|
}
|
||
|
|
|
||
|
|
$('.selected-item-list-warp').lrscroll();
|
||
|
|
|
||
|
|
var $warp = $('#selected_item_list');
|
||
|
|
$warp.on('click', function (e) {
|
||
|
|
var et = e.target || e.srcElement;
|
||
|
|
var $et = $(et);
|
||
|
|
if ($et.hasClass('item-reomve')) {
|
||
|
|
var id = $et.parent().attr('data-value');
|
||
|
|
$et.parent().remove();
|
||
|
|
delete selectData[id];
|
||
|
|
var keyword = $('#txt_keyword').val();
|
||
|
|
page.search(keyword);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
},
|
||
|
|
search: function (text) {
|
||
|
|
if (gridData == null) {
|
||
|
|
setTimeout(function () {
|
||
|
|
page.search(text);
|
||
|
|
}, 100);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
var _data = [];
|
||
|
|
$.each(gridData, function (_index, _item) {
|
||
|
|
if (!!selectData[_item[op.dataValueId]]) {
|
||
|
|
_item.lrcheck = 1;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
_item.lrcheck = 0;
|
||
|
|
}
|
||
|
|
if (_item[op.dataTreeId] == treeValue || treeValue == "") {
|
||
|
|
if (text == "" || _item[op.dataTextId].indexOf(text) != -1) {
|
||
|
|
_data.push(_item);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
$('#gridtable').jfGridSet('refreshdata', _data);
|
||
|
|
|
||
|
|
}
|
||
|
|
},
|
||
|
|
setSelect: function (data, ischeck) {
|
||
|
|
var $list = $('#selected_item_list');
|
||
|
|
if (ischeck) {
|
||
|
|
if ($list.find('[data-value="' + data[op.dataValueId] + '"]').length == 0) {
|
||
|
|
selectData[data[op.dataValueId]] = data[op.dataTextId];
|
||
|
|
var _html = '<div class="item-selected-box" data-value="' + data[op.dataValueId] + '" >';
|
||
|
|
_html += '<p><span>' + data[op.dataTextId] + '</span></p>';
|
||
|
|
_html += '<span class="item-reomve" title="移除选中项"></span>';
|
||
|
|
_html += '</div>';
|
||
|
|
$list.append($(_html));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$list.find('[data-value="' + data[op.dataValueId] + '"]').remove();
|
||
|
|
delete selectData[data[op.dataValueId]];
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
};
|
||
|
|
// 保存数据
|
||
|
|
acceptClick = function (callBack) {
|
||
|
|
if (op.isMultiple) {
|
||
|
|
callBack(selectData, dfopid);
|
||
|
|
} else {
|
||
|
|
var item = $('#gridtable').jfGridGet('rowdata');
|
||
|
|
selectData = {};
|
||
|
|
if (item) {
|
||
|
|
selectData[item[op.dataValueId]] = item[op.dataTextId];
|
||
|
|
}
|
||
|
|
callBack(selectData, dfopid);
|
||
|
|
}
|
||
|
|
return true;
|
||
|
|
};
|
||
|
|
page.init();
|
||
|
|
}
|
||
|
|
</script>
|