398 lines
16 KiB
JavaScript
398 lines
16 KiB
JavaScript
|
/**
|
|||
|
|
* Created by 陈熠 on 2017/6/21
|
|||
|
|
* email : 228112142@qq.com
|
|||
|
|
*/
|
|||
|
|
(function ($) {
|
|||
|
|
var selectPages = [];
|
|||
|
|
/*分页默认参数*/
|
|||
|
|
var defaultParam = {
|
|||
|
|
search: false,
|
|||
|
|
nd: new Date().getTime(),
|
|||
|
|
limit: 5,
|
|||
|
|
page: 1,
|
|||
|
|
sidx: '',
|
|||
|
|
order: 'desc',
|
|||
|
|
init: true,
|
|||
|
|
_: new Date().getTime()
|
|||
|
|
};
|
|||
|
|
/* 入口函数 */
|
|||
|
|
$.fn.selectPage = function () {
|
|||
|
|
//参数数据
|
|||
|
|
var cyProps = $(this).attr("cyProps");
|
|||
|
|
if (!cyProps) {
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
cyProps = cyProps ? cyProps : "";
|
|||
|
|
//将表格参数转为json
|
|||
|
|
cyProps = eval("({" + cyProps + "})");
|
|||
|
|
//创建节点
|
|||
|
|
createDom($(this), cyProps);
|
|||
|
|
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
|
|||
|
|
/**创建相关dom元素 **/
|
|||
|
|
function createDom(_this, cyProps) {
|
|||
|
|
var _name = $(_this).attr("name") || "";
|
|||
|
|
var _value = $(_this).attr("value") || "";
|
|||
|
|
var showTips = _value === "" ? "cy-show" : "cy-none";
|
|||
|
|
var _tips = cyProps.tips || "请根据用户id搜索";
|
|||
|
|
var _checkbox = cyProps.checkbox || "true";
|
|||
|
|
var ITEM_CLASS = _checkbox==="true"?"":"select-single";
|
|||
|
|
var _search = cyProps.search === "false" ? "none" : "block";
|
|||
|
|
var nowTime = (new Date()).getTime();
|
|||
|
|
var selectId = "multi-select-" + nowTime + $(".multi-select").length;
|
|||
|
|
var pageId = "page-" + nowTime + $(".dd-page").length;
|
|||
|
|
/** 渲染结果**/
|
|||
|
|
var outHtml =
|
|||
|
|
_this.html([
|
|||
|
|
'<div class="layui-form-select select-page" select-id="' + selectId + '">',
|
|||
|
|
'<input type="text" name="' + _name + '" value="' + _value + '" class="form-input cy-none">',
|
|||
|
|
'<div class="layui-input multi-select">',
|
|||
|
|
'<input type="text" readonly="true" placeholder="' + _tips + '" class="select-tips ' + showTips + '">',
|
|||
|
|
'</div>',
|
|||
|
|
'<i class="layui-edge"></i>',
|
|||
|
|
'<dl class="layui-anim layui-anim-upbit" style="">',
|
|||
|
|
'<dd lay-value="dd-search" class="dd-bar dd-search" style="display: ' + _search + '">',
|
|||
|
|
'<i class="layui-icon select-page-search-btn" ></i>',
|
|||
|
|
'<input class="layui-input search_condition" placeholder="关键字搜索">',
|
|||
|
|
'<i class="layui-icon select-page-search-clear">ဆ</i>',
|
|||
|
|
'</dd>',
|
|||
|
|
'<div class="dd-content '+ITEM_CLASS+'"></div>',
|
|||
|
|
'<dd lay-value="dd-page" class="dd-bar dd-page">',
|
|||
|
|
'<div class="lay-page" id="' + pageId + '"></div>',
|
|||
|
|
'</dd>',
|
|||
|
|
'</dl>',
|
|||
|
|
'</div>'
|
|||
|
|
].join(""));
|
|||
|
|
_this.append(outHtml);
|
|||
|
|
|
|||
|
|
selectPages.push($(_this));
|
|||
|
|
//下拉json数据
|
|||
|
|
var R = getSelectData(cyProps.url);
|
|||
|
|
var selectData = dataPage(1, 1000000, R.data || []);
|
|||
|
|
$t.setSessionStorage(selectId, selectData);
|
|||
|
|
$t.setSessionStorage("curr-"+selectId,selectData);
|
|||
|
|
//数据回填
|
|||
|
|
for (var i = 0; i < selectData.length; i++) {
|
|||
|
|
//默认值回选
|
|||
|
|
var _values = _value.split(",") || "";
|
|||
|
|
if (_values.indexOf(selectData[i].code) > -1) {
|
|||
|
|
var _selected = '<a href="javascript:;"><span class="selected-title" lay-value="' + selectData[i].code + '">' + selectData[i].value + '</span><i>×</i></a>';
|
|||
|
|
$(_this).find(".multi-select").append(_selected);
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
renderPage(_this,pageId,selectId,R.count,_checkbox);
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
function renderPage(_this,pageId,selectId,count,_checkbox){
|
|||
|
|
layui.use(['form', 'laypage'], function () {
|
|||
|
|
var form = layui.form;
|
|||
|
|
var laypage = layui.laypage;
|
|||
|
|
laypage.render({
|
|||
|
|
elem: pageId
|
|||
|
|
, count: count || 0
|
|||
|
|
, first: false
|
|||
|
|
, last: false
|
|||
|
|
, limit: defaultParam.limit
|
|||
|
|
, prev: '<i class="fa fa-angle-double-left"></i>'
|
|||
|
|
, next: '<i class="fa fa-angle-double-right"></i>'
|
|||
|
|
, layout: ['prev', 'next', 'skip', 'count']
|
|||
|
|
, jump: function (obj, first) {
|
|||
|
|
|
|||
|
|
var _v=$("#"+obj.elem).parents(".select-page").find(".form-input").val();
|
|||
|
|
$(_this).find(".dd-content").html("");
|
|||
|
|
var selectData = dataPage(obj.curr, defaultParam.limit, $t.getSessionStorage("curr-"+selectId) || []);
|
|||
|
|
//数据渲染
|
|||
|
|
for (var i = 0; i < selectData.length; i++) {
|
|||
|
|
var _dd = _checkbox === "true"
|
|||
|
|
? '<dd class="select-item" lay-value="' + selectData[i].code + '" lay-title="' + selectData[i].value + '"><input type="checkbox" title="' + 'id：' + selectData[i].code + ';用户名：' + selectData[i].value + '" lay-filter="selectPageItem" lay-skin="primary"></dd>'
|
|||
|
|
: '<dd class="select-item" lay-value="' + selectData[i].code + '" lay-title="' + selectData[i].value + '">' + selectData[i].value + '</dd>';
|
|||
|
|
//默认值回选
|
|||
|
|
var _values = _v.split(",") || "";
|
|||
|
|
if (_values.indexOf(selectData[i].code) > -1) {
|
|||
|
|
|
|||
|
|
if (_checkbox === "true") {
|
|||
|
|
_dd = _dd.replace('<input type="checkbox"', '<input type="checkbox" checked');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (_checkbox === "false") {
|
|||
|
|
_dd = _dd.replace('<dd class="select-item"', '<dd class="select-item layui-this"');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
$(_this).find(".dd-content").append(_dd);
|
|||
|
|
}
|
|||
|
|
form.render();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
/**数组分页
|
|||
|
|
* pageNo 当前第几页
|
|||
|
|
* pageSize 每页几条
|
|||
|
|
* array 数据列表
|
|||
|
|
* **/
|
|||
|
|
function dataPage(pageNo, pageSize, array) {
|
|||
|
|
var offset = (pageNo - 1) * pageSize;
|
|||
|
|
return (offset + pageSize >= array.length) ? array.slice(offset, array.length) : array.slice(offset, offset + pageSize);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**隐藏其他下拉框 **/
|
|||
|
|
function hideOtherSelect(obj) {
|
|||
|
|
$.each(selectPages, function () {
|
|||
|
|
var selectId = $(this).find(".select-page").attr("select-id");
|
|||
|
|
var oldId = $(obj).parent().attr("select-id");
|
|||
|
|
if (selectId === oldId)return;
|
|||
|
|
$("[select-id='" + selectId + "']").removeClass("layui-form-selected");
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**获取下拉树数据 **/
|
|||
|
|
function getSelectData(url) {
|
|||
|
|
var data = "";
|
|||
|
|
$.ajax({
|
|||
|
|
url: url,
|
|||
|
|
async: false,
|
|||
|
|
data: defaultParam,
|
|||
|
|
dataType: "json",
|
|||
|
|
success: function (R) {
|
|||
|
|
if (R.code == 0) {
|
|||
|
|
data = R
|
|||
|
|
} else {
|
|||
|
|
alert(R.msg);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
error: function () {
|
|||
|
|
alert("系统错误");
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
return data;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**获取搜索后的数据 **/
|
|||
|
|
function searchData(selectId, value) {
|
|||
|
|
var selectData = $t.getSessionStorage(selectId);
|
|||
|
|
//显示搜索结果菜单
|
|||
|
|
var k = value;
|
|||
|
|
// if (k == "") return;
|
|||
|
|
var arr = [];
|
|||
|
|
var patt = new RegExp(k);
|
|||
|
|
for (var i = 0; i < selectData.length; i++) {
|
|||
|
|
if (patt.test(selectData[i].code)) {
|
|||
|
|
arr.push({code: selectData[i].code, value: selectData[i].value});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return arr;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**获取插件配置 **/
|
|||
|
|
function getProps(elem) {
|
|||
|
|
//参数数据
|
|||
|
|
var cyProps = $(elem).parents("[cytype='selectPageTool']").attr("cyProps");
|
|||
|
|
cyProps = cyProps ? cyProps : "";
|
|||
|
|
//将表格参数转为json
|
|||
|
|
cyProps = eval("({" + cyProps + "})");
|
|||
|
|
|
|||
|
|
return cyProps;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**是否显示tips*/
|
|||
|
|
function showTips(selectId) {
|
|||
|
|
var _select = $('[select-id="' + selectId + '"]');
|
|||
|
|
//不显示
|
|||
|
|
if (_select.find(".form-input").val()) {
|
|||
|
|
_select.find(".select-tips").hide();
|
|||
|
|
}
|
|||
|
|
//显示
|
|||
|
|
else {
|
|||
|
|
_select.find(".select-tips").show();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
/**重置面板位置*/
|
|||
|
|
function resetPosition(elem) {
|
|||
|
|
var _height=$(elem).parents(".select-page").height();
|
|||
|
|
$(elem).parents(".select-page").find(".layui-anim").css("top",_height+2+"px");
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function searchSelect(_this){
|
|||
|
|
var cyProps = getProps($(_this));
|
|||
|
|
var _selectId = $(_this).parents(".select-page").attr("select-id");
|
|||
|
|
var data = searchData(_selectId, $(_this).val());
|
|||
|
|
|
|||
|
|
var pageId= $(_this).parents(".select-page").find(".lay-page").attr("id");
|
|||
|
|
$t.setSessionStorage("curr-"+_selectId, data);
|
|||
|
|
renderPage($(_this).parents(".select-page"),pageId,_selectId,data.length,cyProps.checkbox||"true");
|
|||
|
|
|
|||
|
|
if (data.length === 0) {
|
|||
|
|
$(_this).parents(".select-page").find(".dd-content").html('<dd style="text-align: center">暂无数据</dd>');
|
|||
|
|
}
|
|||
|
|
var selectData = dataPage(1, defaultParam.limit, data);
|
|||
|
|
|
|||
|
|
$(this).parents(".select-page").find(".select-item").remove();
|
|||
|
|
var _checkbox = cyProps.checkbox || "true";
|
|||
|
|
var _value = $(_this).parents(".select-page").find(".form-input").val() || "";
|
|||
|
|
|
|||
|
|
//数据渲染
|
|||
|
|
for (var i = 0; i < selectData.length; i++) {
|
|||
|
|
var _dd = _checkbox === "true"
|
|||
|
|
? '<dd class="select-item" lay-value="' + selectData[i].code + '" lay-title="' + selectData[i].value + '"><input type="checkbox" title="' + selectData[i].value + '" lay-filter="selectPageItem" lay-skin="primary"></dd>'
|
|||
|
|
: '<dd class="select-item" lay-value="' + selectData[i].code + '" lay-title="' + selectData[i].value + '">' + selectData[i].value + '</dd>';
|
|||
|
|
//默认值回选
|
|||
|
|
var _values = _value.split(",") || "";
|
|||
|
|
if (_values.indexOf(selectData[i].code) > -1) {
|
|||
|
|
if (_checkbox === "true") {
|
|||
|
|
_dd = _dd.replace('<input type="checkbox"', '<input type="checkbox" checked');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (_checkbox === "false") {
|
|||
|
|
_dd = _dd.replace('<dd class="select-item"', '<dd class="select-item layui-this"');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
$(this).parents(".select-page").find(".dd-content").append(_dd);
|
|||
|
|
}
|
|||
|
|
layui.use(['form'], function () {
|
|||
|
|
var form = layui.form;
|
|||
|
|
form.render();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**搜索监听 **/
|
|||
|
|
$(document).on("keypress", ".search_condition", function (e) {
|
|||
|
|
e.stopPropagation();
|
|||
|
|
//是否为Enter键
|
|||
|
|
if (/^13$/.test(e.keyCode)) {
|
|||
|
|
searchSelect(this);
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
/**监听值删除*/
|
|||
|
|
$(document).on("click", ".multi-select i", function (e) {
|
|||
|
|
var mutiElem=$(this).parents(".multi-select");
|
|||
|
|
var _value = $(this).prev().attr("lay-value");
|
|||
|
|
var cyProps = getProps(this);
|
|||
|
|
var _checkbox = cyProps.checkbox || "true";
|
|||
|
|
//如果是多选
|
|||
|
|
if (_checkbox === "true") {
|
|||
|
|
//隐藏域值修改
|
|||
|
|
var formValue = $(this).parents(".select-page").find(".form-input").val();
|
|||
|
|
var _values = formValue.split(",");
|
|||
|
|
var _index = _values.indexOf(_value);
|
|||
|
|
//从该数组中删除该元素
|
|||
|
|
_values.splice(_index, 1);
|
|||
|
|
$(this).parents(".select-page").find(".form-input").val(_values.join(","));
|
|||
|
|
$(".select-item[lay-value='" + _value + "']").find("input").attr("checked", false);
|
|||
|
|
}
|
|||
|
|
//如果是单选
|
|||
|
|
if (_checkbox === "false") {
|
|||
|
|
$(this).parents(".select-page").find(".form-input").val("");
|
|||
|
|
$(".select-item[lay-value='" + _value + "']").removeClass("layui-this");
|
|||
|
|
}
|
|||
|
|
layui.use(['form'], function () {
|
|||
|
|
var form = layui.form;
|
|||
|
|
form.render();
|
|||
|
|
});
|
|||
|
|
//是否显示提示语
|
|||
|
|
var selectId = $(this).parents(".select-page").attr("select-id");
|
|||
|
|
showTips(selectId);
|
|||
|
|
$(this).parents("a").remove();
|
|||
|
|
//重置面板
|
|||
|
|
resetPosition(mutiElem);
|
|||
|
|
e.stopPropagation();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
/**清空搜索条件**/
|
|||
|
|
$(document).on("click", ".select-page-search-clear", function (event) {
|
|||
|
|
$(this).prev().val("");
|
|||
|
|
searchSelect(this);
|
|||
|
|
event.stopPropagation();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
/**打开或隐藏面板**/
|
|||
|
|
$(document).on("click", "[cyType='selectPageTool'] .multi-select", function (e) {
|
|||
|
|
var _this = $(this).parent();
|
|||
|
|
_this.hasClass("layui-form-selected") === true ? _this.removeClass("layui-form-selected") : _this.addClass("layui-form-selected");
|
|||
|
|
var _height = _this.height();
|
|||
|
|
_this.find(".layui-anim").css("top", _height + 2 + "px");
|
|||
|
|
hideOtherSelect(this);
|
|||
|
|
e.stopPropagation();
|
|||
|
|
});
|
|||
|
|
$(document).on("click", "[cyType='selectPageTool'] .layui-anim", function (e) {
|
|||
|
|
e.stopPropagation();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$(document).on("click", "body:not('.select-page')", function () {
|
|||
|
|
$(".layui-form-selected").removeClass("layui-form-selected");
|
|||
|
|
});
|
|||
|
|
/**单选点击监听事件**/
|
|||
|
|
$(document).on("click", ".select-single .select-item", function () {
|
|||
|
|
var _value = $(this).attr("lay-value");
|
|||
|
|
var _title = $(this).attr("lay-title");
|
|||
|
|
var _selected = '<a href="javascript:;"><span class="selected-title" lay-value="' + _value+ '">' + 'id:' + _value + ';用户名:' +_title + '</span><i>×</i></a>';
|
|||
|
|
$(this).parents(".select-page").find(".multi-select a").remove();
|
|||
|
|
$(this).parents(".select-page").find(".multi-select ").append(_selected);
|
|||
|
|
$(this).parents(".select-page").find(".form-input").val(_value);
|
|||
|
|
$(this).parent().find(".layui-this").removeClass("layui-this");
|
|||
|
|
$(this).parent().find("[lay-value='" + _value + "']").addClass("layui-this");
|
|||
|
|
|
|||
|
|
//是否显示提示语
|
|||
|
|
var selectId = $(this).parents(".select-page").attr("select-id");
|
|||
|
|
showTips(selectId);
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
/**复选点击监听事件**/
|
|||
|
|
layui.use(['form'], function () {
|
|||
|
|
var form = layui.form;
|
|||
|
|
form.on('checkbox(selectPageItem)', function (data) {
|
|||
|
|
var formValue = $(data.elem).parents(".select-page").find(".form-input").val();
|
|||
|
|
var _value=$(data.elem).parents(".select-item").attr("lay-value");
|
|||
|
|
var _values = formValue.split(",");
|
|||
|
|
//如果是勾选
|
|||
|
|
if(data.elem.checked===true){
|
|||
|
|
|
|||
|
|
var _title = $(data.elem).parents(".select-item").attr("lay-title");
|
|||
|
|
// var _selected = '<a href="javascript:;"><span class="selected-title" lay-value="' + _value+ '">' + 'id:' + _value + ';用户名:' +_title +'</span><i>×</i></a>';
|
|||
|
|
var _selected = '<a href="javascript:;"><span class="selected-title" lay-value="' + _value+ '">' + _title +'</span><i>×</i></a>';
|
|||
|
|
$(data.elem).parents(".select-page").find(".multi-select").append(_selected);
|
|||
|
|
//修改隐藏域的值
|
|||
|
|
formValue+=","+_value;
|
|||
|
|
$(data.elem).parents(".select-page").find(".form-input").val(formValue);
|
|||
|
|
}
|
|||
|
|
else{
|
|||
|
|
var _index = _values.indexOf(_value);
|
|||
|
|
//从该数组中删除该元素
|
|||
|
|
_values.splice(_index, 1);
|
|||
|
|
//修改隐藏域的值
|
|||
|
|
$(data.elem).parents(".select-page").find(".form-input").val(_values.join(","));
|
|||
|
|
$(data.elem).parents(".select-page").find(".selected-title[lay-value='"+_value+"']").parents("a").remove();
|
|||
|
|
}
|
|||
|
|
//是否显示提示语
|
|||
|
|
var selectId =$(data.elem).parents(".select-page").attr("select-id");
|
|||
|
|
showTips(selectId);
|
|||
|
|
//重置面板位置
|
|||
|
|
resetPosition(data.elem);
|
|||
|
|
return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
})(jQuery);
|
|||
|
|
|
|||
|
|
$(document).ready(function () {
|
|||
|
|
var selectPageTools = $("[cyType='selectPageTool']");
|
|||
|
|
for (var i = 0; i < selectPageTools.length; i++) {
|
|||
|
|
$(selectPageTools[i]).selectPage();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
});
|