layui框架使用与代码编写
2024-05-09 06:40:15
layui框架使用与代码编写
一、layui增加操作工具列
ShowLeakList = ListPager.extend({init : function(container, primaryKey, url){//列表容器this.container = container;//主键字段this.primaryKey = primaryKey;//数据请求地址this.url = url;//界面需要引用的插件this.plugins = ['table', 'element', 'form', 'laydate', 'layer','carousel'];
// //弹出卡片界面的大小[60%,80%]
// this.cardSize = ['100%','100%'];
// //弹出卡片界面方式：页面层(这里content是一个普通的String):1;iframe层(content是一个URl):2this.cardPopStyle = 2;//每页大小 this.pageSize = 5;//列表头this.title = [[{field: 'checkDate', title: '检测日期', width: 120},{field: 'startTime', title: '检测开始时间', width: 120},{field: 'endTime', title: '检测结束时间', width: 120},{field: 'checkUser', title: '检测人', width: 120},{fixed: 'right', title: '轨迹查看', align:'center',width: 100, toolbar: '#scanLeak'}]]; //插件是基于layui封装的， layOption是对layui的参数扩展（具体api参照layui属性）this.layOption = {};},initLayuiPlugin: function(){this._super();},initEvent: function(){this._super();//TODO 父类仅仅绑定了工具条通用按钮事件， 如有其他事件请在这里定义},hookMethod:function(obj){debugger;var data = obj.data,url = CONTEXT_PATH + '/cusviews/leak/listLeakPoint';var param = {checkId : data.checkId}var retData = $.getData(url,param);if(1000 != retData.status){layer.msg('获取数据失败', {icon: 5});return;}var points = [];var data = retData.data;if(!$.isEmptyArray(data)){Leak.removePoint();for(var i=0;i<data.length;i++){if($.isEmptyStr(data[i].lng) || $.isEmptyStr(data[i].lat)){continue;}var point = {"lng":data[i].lng,"lat":data[i].lat,};points.push(point)var drawPoint = {"lng":data[i].lng,"lat":data[i].lat,"type":pointType[1]}Leak.drawPoint(drawPoint);}Leak.drawLine(points);}}
});
$(function(){var url = CONTEXT_PATH + '/cusviews/leak/listLeak';var showLeakList = new ShowLeakList("leakList", "checkId", url);showLeakList.render();$(".tc_box .cbar").scrollBar();
})
<div class="lay_list"><table id="leakList" lay-filter="leakList"><script type="text/html" id="scanLeak"><a class="layui-btn layui-btn-xs" lay-event="scanLeak">查看</a></script></div>显示超链接
{field: 'oriLink', title: '原文链接', width: 120,templet: '<div><a href="{{d.oriLink}}" class="layui-table-link">{{d.oriLink}}</a></div>'},列表页显示操作按钮
前台
<div class="layui-tab-content"><div class="layui-tab-item layui-show"><div class="layui-form-item query"></div><div class="list" name="listBtns"><table class="layui-table" id="ClassifyCheckAdviceList" lay-filter="ClassifyCheckAdviceList"></table><script type="text/html" id="operation"><a class="layui-btn layui-btn-xs" lay-event="delNews">删除</a><a class="layui-btn layui-btn-xs" lay-event="notNews">暂停</a></script></div></div>this.title = [[{checkbox: true, LAY_CHECKED: false},{title: '序号', templet: '#indexTpl',width:80},{field: 'title', title: '资讯名称', width: 120},{field: 'checkColumnIdName', title: '分类', width: 120}, {field: 'isWorkName', title: '状态', width: 120},{field: '', title: '操作', width: 150,align:'center', toolbar:'#operation'},]]; hookMethod:function(obj){var _self = this,data = obj.data //获得当前行数据,layEvent = obj.event //获得 lay-event 对应的值,url = "";var subjectClassifyId = $("#subjectClassifyId").val();if(layEvent === 'delNews'){ //url = CONTEXT_PATH + "/subjectClassify/showSubjectClassifyNewsList?act=" + WebConst.EDIT+"&entityId="+data.subjectClassifyId;layer.confirm('您确定要删除该条数据吗？', {btn: ['确定','取消'] //按钮}, function(){$.post(CONTEXT_PATH+"/subjectClassify/delCheckAdviceNewsRel",{subjectClassifyId:subjectClassifyId,checkAdviceId:data.checkAdviceId},function(data){layer.msg('删除成功！', {icon: 1});window.location.reload();});}, function(){});/* var layIndex = layer.open({type: this.cardPopStyle,title: "资讯管理",maxmin: true,shadeClose: true, //开启遮罩关闭area: ['100%','100%'],content: this.cardPopStyle == LayuiPopStyle.LAYUI_CONTENT_LAYER ? $.loadHtml(url) : url,success: function(layero){}});*/}if(layEvent === 'notNews'){layer.confirm('您确定要暂停该条数据吗？', {btn: ['确定','取消'] //按钮}, function(){$.post(CONTEXT_PATH+"/subjectClassify/checkAdviceNewsNotWork",{checkAdviceId:data.checkAdviceId},function(data){layer.msg('已暂停！', {icon: 1});window.location.reload();});}, function(){});}},二、layui列表显示图片
layui的列表界面
{field: '', title: '照片', width: 120,templet:'<div><img src="{{d.imagePath}}"></div>'},后台
业务实体类
private String href;private String imgPosition;private String imgPositionName;private Attach picName;private String imagePath = null;public Attach getPicName() {return picName;}public void setPicName(Attach picName) {this.picName = picName;}public String getImagePath() {if(picName!=null && !StringUtil.isEmpty(picName.getAttachmentId())) {imagePath = "/attach/showPicture?attachmentId="+picName.getAttachmentId()+"&isThumbnail=true";}else {imagePath="暂无图片";}return imagePath;}图片路径实体类
public class Attach implements Serializable{private static final long serialVersionUID = 1L;private String attachmentId;private String attachmentName; private String entityId;
}业务列表数据查询，查询返回的封装数据。直接把当前表的主键传入图片路径表
<id column="COMMENT_GOOD_ID" property="partyCommentGoodId" jdbcType="VARCHAR" /><association property="picName" column="COMMENT_GOOD_ID" select="dao.AttachParMapper.findById"></association><select id="getAllImagess" resultMap="BaseResultMap" parameterType="com.images.model.Images"> select * from(select t.*,(select p.COLUMN_NAME from pb_check_column p where p.CHECK_COLUMN_ID =t.CHECK_COLUMN_ID) as checkColumnIdNamefrom PB_FOCUS_IMAGE twhere 1 = 1order by ORDER_NO desc nulls last) order by VALID desc,ORDER_NO desc</select> 图片路径表的接口获取业务表的Id，根据id获取图片存放的路径
public interface AttachParMapper {public Attach findById(String COMMENT_GOOD_ID);
}<select id="findById" parameterType="String" resultMap="BaseResultMap">select *from(selectca.attachment_id,ca.attachment_name,ca.entity_idfromATTACHMENT cawhere ca.ENTITY_ID =#{COMMENT_GOOD_ID,jdbcType=VARCHAR}and ca.FIELD_CODE = 'Photo'order by ca.create_date desc )where rownum = 1</select>三、layui增加页签
增加页签
layui.use('element', function(){var element = layui.element;var retData= $.getData(CONTEXT_PATH+"/Statu");if(retData.status ==SUCCESS){if(retData.data){var url=CONTEXT_PATH+"/show/showList";element.tabAdd('applyTab', {title: '思想汇报',content: $.loadHtml(url) //支持传入html,id: 'thougthReport'});}}});监听页签
<div class="system"><div class="layui-tab" lay-filter="attend"><ul class="layui-tab-title"><li class="layui-this">已报名</li><li>未报名</li> </ul></div>
</div>layui.use('element', function(){ var element = layui.element;element.init();element.on('tab(attend)', function(data){var index = data.index;if(index==1){var url = CONTEXT_PATH + '/my/list';var showMyList = new ShowMyList("activityList", "activityId", url);showMyList.render();}}); });关于layui页签变换监听相应页签下的列表界面的按钮
<div class="layui-tab" lay-filter="goodorbad"><ul class="layui-tab-title"><li class="layui-this">奖励信息</li><li>处罚信息</li> </ul></div>layui.use('element', function(){ var element = layui.element;element.init();element.on('tab(goodorbad)', function(data){var index = data.index;if(index==1){var url = CONTEXT_PATH + '/Pub/list';var showPubList = new ShowPubList("PublishList", "PubId", url);showPubList.render(function(_self,layui){$('button[action="edit(this,event);"]').unbind('click').bind('click', function(){var action = "_self.edit(this,event);";eval(action);});$('button[action="add(this,event);"]').unbind('click').bind('click', function(){var action = "_self.add(this,event);";eval(action);});$('button[action="del(this,event);"]').unbind('click').bind('click', function(){var action = "_self.del(this,event);";eval(action);});$('button[action="view(this,event);"]').unbind('click').bind('click', function(){var action = "_self.view(this,event);";eval(action);});});}if(index==0){var url = CONTEXT_PATH + '/pub/list';var showpubList = new ShowpubList("pubList", "pubId", url);showpubList.render(function(_self){$('button[action="edit(this,event);"]').unbind('click').bind('click', function(){var action = "_self.edit(this,event);";eval(action);});$('button[action="add(this,event);"]').unbind('click').bind('click', function(){var action = "_self.add(this,event);";eval(action);});$('button[action="del(this,event);"]').unbind('click').bind('click', function(){var action = "_self.del(this,event);";eval(action);});$('button[action="view(this,event);"]').unbind('click').bind('click', function(){var action = "_self.view(this,event);";eval(action);});});}});四、layui 列表页换页不能保存前一页勾选的数据
layui监听复选框的值
//复选框事件选中以后回调layui.table.on('checkbox(' + _self.container + ')', function(obj){if(_self.tableAfterChecked && $.isFunction(_self.tableAfterChecked)){_self.tableAfterChecked(obj); //回调 子类中的 钩子方法}});前台html存选中的id
@RequestMapping (value="/user/showUserList")public String showUserList(Model model,String ids){model.addAttribute("userIds", ids);return "select/user/showUserList";}<input type="hidden" name="userIds" value='${userIds}'>layui列表界面js
var initParam=$("input[name='userIds']").val().split(',')||[];
var ShowUserList = ListPager.extend({init : function(container, primaryKey, url){var _self = this;]]; //插件是基于layui封装的， layOption是对layui的参数扩展（具体api参照layui属性）this.dataArr = new Array();},initLayuiPlugin: function(){this._super();},initEvent: function(){this._super();//TODO 父类仅仅绑定了工具条通用按钮事件， 如有其他事件请在这里定义},User : function(curDom, event){debugger;var _self = this;/*var data = _self.getSelectRows();*/var data = _self.dataArr;if(data.length == 0){return;}},afterDone:function(thi,cum){ //初始化进入界面的时候给全局数组initParam赋值var _self=this;var ids=$("#UserList").next(".layui-form").children(".layui-table-body").find("td[data-field='userCode']");for(var i=0;i<ids.length;i++){var CodeId=$(ids[i]).find(".layui-table-cell").html();if($.inArray(CodeId,initParam)!="-1"){$($(ids[i]).siblings()[0]).find("input[type='checkbox']").attr("checked",true);$($(ids[i]).siblings()[0]).find(".layui-unselect").attr("class","layui-unselect layui-form-checkbox layui-form-checked");}}},tableAfterChecked:function(obj){ //勾选数据的时候给全局数组initParam赋值var _self = this;if(obj.checked){//选中状态var data = _self.getSelectRows();for(var k=0;k<data.length;k++){if($.inArray(data[k].userCode,initParam)=="-1"){var param = new Object();param.userCode = data[k].userCode;param.idNumber = data[k].idNumber;param.orgId = data[k].orgId;param.orgName = data[k].orgName;param.userName = data[k].userName;param.userPass = data[k].userPass;param.userSex = data[k].userSex;param.userSexName = data[k].userSexName;initParam.push(data[k].userCode);_self.dataArr.push(param);}}}else{//取消勾选if(obj.type=='all'){var ids=$("#UserList").next(".layui-form").children(".layui-table-body").find("td[data-field='userCode']");var CodeIds = [];for(var i=0;i<ids.length;i++){CodeIds.push($(ids[i]).find(".layui-table-cell").html());}for(var i=0;i<CodeIds.length;i++){debugger;if($.inArray(CodeIds[i],initParam)!="-1"){initParam.splice(initParam.indexOf(CodeIds[i]), 1,"");}for(var j=0;j<_self.dataArr.length;j++){if(_self.dataArr[j].userCode==CodeIds[i]){_self.dataArr.splice(j,1);_self.dataArr}}}}if(obj.type=='one'){debugger;var data = obj.data;var userCode=data.userCode;if($.inArray(userCode,initParam)!="-1"){/*delete initParam[userCode]; 删除数组中指定的元素*/ initParam.splice(initParam.indexOf(userCode), 1,"");for(var i=0;i<_self.dataArr.length;i++){if(_self.dataArr[i].userCode==userCode){_self.dataArr.splice(i,1);_self.dataArr}}}}} }
});layui 查询选择与保存展示勾选
定义全局变量
//初始化传递参数var initParam=$("input[name='members']").val().split(',')||[];
var initParamName = $("input[name='membersName']").val();
var paramName = initParamName.substring(0,initParamName.length-1);//页面展示字典翻译封装参数
var codeName=new Array();
for(var i=0;i<initParam.length;i++){var param = new Object();param.code = initParam[i];param.name = paramName.split(',')[i];codeName.push(param);}查询选择框事件
,afterDone:function(thi,cum){ //页面加载显示勾选数据var _self=this;var ids=$("#mmberSelectList").next(".layui-form").children(".layui-table-body").find("td[data-field='userId']");for(var i=0;i<ids.length;i++){var memberId=$(ids[i]).find(".layui-table-cell").html();if($.inArray(memberId,initParam)!="-1"){$($(ids[i]).siblings()[0]).find("input[type='checkbox']").attr("checked",true);$($(ids[i]).siblings()[0]).find(".layui-unselect").attr("class","layui-unselect layui-form-checkbox layui-form-checked");/*var names={};names.name=$($(ids[i]).siblings()[1]).find(".layui-table-cell").html();names.code=memberId;codeName[memberId]=names;*/}}},tableAfterChecked:function(obj){ //保存勾选数据的IDvar _self = this;if(obj.checked){//选中状态var data = _self.getSelectRows();for(var k=0;k<data.length;k++){if($.inArray(data[k].userId,initParam)=="-1"){initParam.push(data[k].userId);var names={};names.name=data[k].name;names.code=data[k].userId;codeName.push(names);}}}else{//取消勾选if(obj.type=='all'){var ids=$("#memberSelectList").next(".layui-form").children(".layui-table-body").find("td[data-field='userId']");var CodeIds = [];for(var i=0;i<ids.length;i++){CodeIds.push($(ids[i]).find(".layui-table-cell").html());}for(var i=0;i<CodeIds.length;i++){if($.inArray(CodeIds[i],initParam)!="-1"){initParam.splice(initParam.indexOf(CodeIds[i]), 1,"");}for(var j=0;j<codeName.length;j++){if(codeName[j].code==CodeIds[i]){codeName.splice(j,1);}}}}if(obj.type=='one'){var data = obj.data;var userId=data.userId;if($.inArray(userId,initParam)!="-1"){/*delete initParam[userCode]; 删除数组中指定的元素*/ initParam.splice(initParam.indexOf(userId), 1,"");for(var i=0;i<codeName.length;i++){if(codeName[i].code==userId){codeName.splice(i,1);}}}}}}查询选择框保存事件
querySelectCallbackData = function () {var idArr = [];for(i=0,len=codeName.length; i<len; i++){if(""!=codeName[i]["code"]&&""!=codeName[i]["name"]){var obj = {};obj.code = codeName[i]["code"];obj.name = codeName[i]["name"];idArr.push(obj);}}return idArr;}layui JS框架
if(_self.afterDone && $.isFunction(_self.afterDone)){_self.afterDone(this,_self.container);} //复选框事件选中以后回调layui.table.on('checkbox(' + _self.container + ')', function(obj){if(_self.tableAfterChecked && $.isFunction(_self.tableAfterChecked)){_self.tableAfterChecked(obj); //回调 子类中的 钩子方法}});查询选择layui的js框架
querySelect : function(thi,event){var param=$("#" + this.settings.fieldCode + "-popSelector").find("input[type='hidden']").val();var _self = this;var url = "";var urlParam=_self.settings.url;if(urlParam.indexOf("?") != -1 ){url=CONTEXT_PATH + urlParam+"&ids="+param;}else{url = CONTEXT_PATH + urlParam+"?ids="+param;}var layIndex = layer.open({type: LayuiPopStyle.LAYUI_IFRAME_LAYER,title: "查询选择",maxmin: false,shadeClose: false, //开启遮罩关闭area: _self.settings.area,btn: ['确认', '取消'],content: url,success: function(layero){},yes: function(index, layero){ //如果设定了yes回调，需进行手工关闭//当点击‘确定’按钮的时候，获取弹出层返回的值var dataArr = window["layui-layer-iframe" + index].querySelectCallbackData();if(dataArr.length == 0){layer.msg("只能选择数据...", {icon: 5});return false;}if(!eval(_self.settings.multi) && dataArr.length > 1){ //默认单选layer.msg("只能选择一条数据...", {icon: 5});return false;}var _keys = _self.settings.code,code = "",name = "";userId = "";if(!_self.settings.multi){code = dataArr[0]['code'];name = dataArr[0]['name'];}else{var _code = "",_name = "";_userId="";for(var i=0,len=dataArr.length; i<len; i++){_code += dataArr[i]['code'] +",";_name += dataArr[i]['name'] +",";if(!$.isEmptyStr(dataArr[i]['userId'])){_userId += dataArr[i]['userId'] +",";}}code = _code.substring(0,_code.length-1);name = _name.substring(0,_name.length-1);if(_userId.length>1){userId += _userId.substring(0,_userId.length-1);}}//给input[name='']:text 赋值$("input[name='" + _keys[0] + "']:hidden").val(code);$("input[name='" + _keys[1] + "']:text").val(name);$("textarea[name='"+ _keys[1] + "']").val(name);if(!$.isEmptyStr(userId)){$("input[name='orgUserId']:hidden").val(userId);}layer.close(index); },end: function(){ //销毁列表回调方法},cancel: function(){ //点击左上角关闭按钮回调方法}});}五、layui提交表单数据
layui.form.on
提交按钮
<button class="layui-btn layui-btn-big" lay-submit="" lay-filter="yesFLowNodeVO">审批通过</button>layui.form.on('submit(yesFLowNodeVO)', function(data){//处理 KindEditor 富文本取值问题debugger;var formDoms = data["form"];var url = CONTEXT_PATH +"/adviceAudit/save";var toMessage =data.field.toMessage;var auditReason=data.field.auditReason;var adviceStatus = "2";var param ={"toMessage":$.toJSON(toMessage),"auditReason":$.toJSON(auditReason),"adviceStatus":$.toJSON(adviceStatus)}var retData = $.getData(url, param);if(retData.status!=1000 || retData.status == WebConst.FAIL){if(!$.isEmptyStr(retData.message)){layer.msg(retData.message, {icon: 5});return false;}layer.msg('保存失败', {icon: 5});return false;}layer.msg('保存成功', {icon: 6});return false;});
六、layui表单定义二级字典
html
<div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label fwb" style="margin-top:4px;">原因</label><div class="layui-input-inline" style="margin-top:7px;"><select name="punishreasonone" lay-filter="reason" id="punishreasonone" ><option value="">请选择</option></select></div></div><div class="layui-inline" id="punishreasontwodiv" ><select name="punishreasontwo" lay-filter="reasontwo" id="punishreasontwo" ><option value="" >请选择</option></select></div></div>js根据获取的数据动态生成select 的option
layui.form.on('select(reason)', function(data){debugger;var url = CONTEXT_PATH+"/dictionary/dictionaryItemList";var param = {"dictCode":data.value};$("#punishreasontwo option").remove();var data = $.getData(url,param);var punishreason = $("#punishreasontwo");if(data.length==0){$("#punishreasontwodiv").attr("style","display: none;");return;}else{$("#punishreasontwodiv").attr("style","display: ;");}punishreason.append("<option value=''>请选择</option>");$(data).each(function(index,obj){punishreason.append("<option value='"+obj.itemCode+"'>"+obj.itemName+"</option>");});layui.form.render('select');});var params = {"rewardpubId":$.QueryString("entityId")};var data = $.getData(CONTEXT_PATH + '/publish/get1',params);if(data && data.status == WebConst.SUCCESS && data.data){var reason = data.data.punishreasonone;var url = CONTEXT_PATH+"/dictionary/dictionaryItemList";var param = {"dictCode":reason};var data = $.getData(url,param);var punishreason = $("#punishreasontwo");$("#punishreasontwo option").remove();punishreason.append("<option value=''>请选择</option>");$(data).each(function(index,obj){punishreason.append("<option value='"+obj.itemCode+"'>"+obj.itemName+"</option>");});layui.form.render('select');}后台返回实体类封装返回的数据
private String rewardName;
private String punishreasonone;private String punishreasontwo;public String getPunishreasonone() {return punishreasonone;}public void setPunishreasonone(String punishreasonone) {this.punishreasonone = punishreasonone;}public String getPunishreasontwo() {return punishreasontwo;}public void setPunishreasontwo(String punishreasontwo) {this.punishreasontwo = punishrea/*** 设置原因* @param rewardName*/public void setRewardName(String rewardName) {if(StringUtil.isNotEmpty(rewardName) && rewardName.split(",").length == 1) {punishreasonone = rewardName.split(",")[0];}if(StringUtil.isNotEmpty(rewardName) && rewardName.split(",").length == 2) {punishreasonone = rewardName.split(",")[0];punishreasontwo = rewardName.split(",")[1];}this.rewardName = rewardName;}public String getRewardNames() {rewardNames="";if(StringUtil.isEmpty(punishreasontwo)) {String dictName=DictContext.getInstance().getDict("punishreason", punishreasonone);if(!StringUtil.isEmpty(dictName)) {rewardNames=dictName;}}if(StringUtil.isNotEmpty(punishreasontwo)) {String dictName=DictContext.getInstance().getDict(punishreasonone, punishreasontwo);if(!StringUtil.isEmpty(dictName)) {rewardNames=dictName;}}return rewardNames;}七、layui模态窗口加载ztree树形菜单
引入的ztree
<!-- ztree -->
<link rel="stylesheet" href="${rc.contextPath}/platform/plugins/zTree/ztreeStyle.css" type="text/css">
<script type="text/javascript" src="${rc.contextPath}/platform/plugins/zTree/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="${rc.contextPath}/platform/plugins/zTree/js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="${rc.contextPath}/platform/plugins/zTree/js/jquery.ztree.exedit.js"></script>
<script type="text/javascript" src="${rc.contextPath}/platform/plugins/zTree/js/jquery.ztree.exhide.js"></script>
<script type="text/javascript" src="${rc.contextPath}/platform/common/js/Base64.js"></script>
ztree获取树形菜单
html
<!DOCTYPE html>
<html>
<head><#include "/common/header.html"/><style type="text/css">html,body{width: 100%;height: 100%;}.fra_wrap{width: 100%;height: 100%;overflow-y: auto;overflow-x:hidden;position: relative;box-sizing: border-box;padding-bottom:60px;}.fra_left{width: 100%;height: 100%;overflow-x: hidden;overflow-y: auto;box-sizing: border-box;border-right: 1px #b9dcf3 solid;/* padding-left:10px; *//* float:left; */}.fra_right{width: 50%;height: 100%;overflow-x: hidden;overflow-y: auto;box-sizing: border-box;padding-left:10px;float:left;}.fra_wrap .layui-input-inline{position:absolute;height:50px;width:100%;left:0;bottom:0;z-index:99;text-align:center;}</style>
</head>
<body>
<div class="fra_wrap"><div class="fra_left"><div class="system_wrap"><ul id="orgDeptTree" class="ztree"></ul></div></div>
</div>
<div><input type="hidden" id="userFlag" value="${userFlag!''}">
</div><script type="text/javascript" src="${rc.contextPath}/view/select/js/showPartyOrgSelectMp.js" charset="utf-8"></script>
</body>
</html>layui初始化ztree
js
var showOrgTree = {init: function(){var _self = this;//利用layui 绘制表单元素layui.use(['element', 'form', 'laydate', 'layer'], function(){layui.form.render();});_self.initTree();_self.initEvent();},initTree(){var _self = this;var setting = {view: {},check: {enable: true},data: {key: {name: "orgName",open: "isOpen"},simpleData: {enable: true,idKey: "pbPartyOrgId",pIdKey: "lastOrg",rootPId: null}},check: {enable: true,chkboxType: { "Y": "", "N": "" }},callback: {beforeClick: _self.zTreeOnClick}};var userFlag = $("#userFlag").val();var zNodes = $.getData(CONTEXT_PATH + "/pbPartyOrg/queryPartyOrgList?userFlag="+userFlag,null);var ztree = $.fn.zTree.init($("#orgDeptTree"), setting, zNodes);var treeObj = $.fn.zTree.getZTreeObj("orgDeptTree");treeObj.expandAll(true);var ids = $.QueryString("ids");if(!ids == ""){var orgIds = ids.split(",");for(var i = 0 ; i<orgIds.length;i++){var node = treeObj.getNodeByParam("pbPartyOrgId", orgIds[i]);treeObj.checkNode(node, true, true,false);}}},initEvent: function(){var _self = this;},zTreeOnClick: function(event, treeId, treeNode){}
};$(function(){showOrgTree.init();querySelectCallbackData = function () {var treeObj = $.fn.zTree.getZTreeObj("orgDeptTree");var treeNodes = treeObj.getCheckedNodes(true);var idArr = [];for(i=0,len=treeNodes.length; i<len; i++){var obj = {};obj.code = treeNodes[i]["pbPartyOrgId"];obj.name = treeNodes[i]["orgName"];idArr.push(obj);}return idArr;}
});layui模态窗口加载ztree的html
模态窗口的html
<span >当前组织机构：</span><!-- <select id="selectOrg"></select> --><input type="text" name="selectOrgName" id="selectOrgName" readOnly="readOnly" size="56" width="120" value="委员会"><input type="hidden" name="selectOrg" id="selectOrg"><a href="javascript:void(0)" onclick="openOrgTree();" id="openOrgTree" >选择组织</a></div>js
$(function(){initData();
});function initData(){sex();nation();age();
}function openOrgTree(){var url = CONTEXT_PATH+"/pbPartyOrg/choicePartyOrg";/* layer.open({type: 2,title: '选择组织机构',area: ['68%', '66%'],maxmin: true,shadeClose: false, //开启遮罩关闭content:url,success : function(layero){},cancel: function(){}});*/layer.open({type: 2,title: "选择组织机构",maxmin: false,shadeClose: false, //开启遮罩关闭area: ['68%', '66%'],btn: ['确认', '取消'],content: url,success: function(layero){},yes: function(index, layero){ //如果设定了yes回调，需进行手工关闭//当点击‘确定’按钮的时候，获取弹出层返回的值var dataArr = window["layui-layer-iframe" + index].querySelectCallbackData();if(dataArr.length == 0){layer.msg("请选择一个组织机构...", {icon: 5});return false;}if(dataArr.length > 1){ //默认单选layer.msg("只能选择一个组织机构...", {icon: 5});return false;}var _code = "",_name = "";for(var i=0,len=dataArr.length; i<len; i++){_code += dataArr[i]['code'] +",";_name += dataArr[i]['name'] +",";}code = _code.substring(0,_code.length-1);name = _name.substring(0,_name.length-1);debugger;//给input[name='']:text 赋值$("input[name='selectOrg']:hidden").val(code);$("input[name='selectOrgName']:text").val(name);sex(code);nation(code);age(code);layer.close(index); },end: function(){ //销毁列表回调方法},cancel: function(){ //点击左上角关闭按钮回调方法}});}八、layui上传图片
html
<div class="layui-inline"><label class="layui-form-label fwb">用户照片</label><div class="layui-upload layui-input-inline"><button type="button" class="layui-btn" id="test1">上传照片</button><div class="layui-upload-list"><img class="layui-upload-img" src="" id="userPhone"><p id="demoText"></p></div></div><div><input type="hidden" id="attachmentId" name="attachmentId" lay-verify="" autocomplete="off" placeholder="请输入" ${edited} class="layui-input"><input type="hidden" name="imagePath" id="imagePath"/><input type="hidden" name="orgId" id="orgId"/><input type="hidden" name="uploadAttachmentIds" id="uploadAttachmentIds"></div></div></div>js
var ShowUser= CardPager.extend({init: function(filter, url){debugger;this._super(filter, url);//界面需要引用的插件this.plugins = ['element', 'form', 'layedit', 'upload', 'laydate', 'layer'];this.primaryKey = "userId";this.primaryValue = $.QueryString("entityId");this.dataUrl = CONTEXT_PATH + '/user/get';this.entityName = "user";var imagePath = $("#imagePath").val();$("#userPhone").attr('src',imagePath);},initLayuiPlugin: function(){this._super(); var _self = this;_self.files = null;layui.laydate.render({elem: '#birthDate'});//执行实例$.renderUpload({fieldName : "照片", //业务字段名称fieldCode : "dealPicture", //业务字段编码entityName : "user", //业务实体selfFiles : _self.files});},initEvent: function(){this._super();var _self = this;_self.uploadUserPic();//TODO 父类只定义了 保存事件，其他事件在这里进行定义},initThirdPlugin: function(){var _self = this;},uploadUserPic:function(){var uploadDoc = layui.upload.render({elem:'#test1',accept: 'images',url:CONTEXT_PATH+"/attach/upload",data:{ //上传参数"entityName" : "personalUser", "fieldCode" : "userId", "fieldName" : "userId", }, before:function(obj){obj.preview(function(index, file, result){$('#userPhone').attr('src', result);});},done:function(res, index, upload){if(res && res.status == WebConst.SUCCESS){//自定义返回失败//$($("iframe[src='/partyMember/detail?act=add']").contents().find("#partyMemberForm")).setValues(ptParam);
// $("#docDemo").attr("src",CONTEXT_PATH+"/attach/showPicture?attachmentId="+res.data['attachmentId']+"&isThumbnail=true&date="+new Date().getTime());$("#uploadAttachmentIds").val(res.data['attachmentId']);/*return layer.msg('请点击提交个人资料上传图片');*/}else{/* layer.msg('请点击提交个人资料上传图片');*/}},error:function(){var demoText = $('#demoText');demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');demoText.find('.demo-reload').on('click', function(){uploadDoc.upload();});}});}
});$(function(){showUser = new ShowUser('user', CONTEXT_PATH + '/user/save');showUser.render(function(data,_self){debugger;var imagePath = CONTEXT_PATH+$("#imagePath").val();$("#userPhone").attr('src',imagePath);//如果有附件，上传附件layui.form.on('submit(' + _self.filter + ')', function(data){//处理 KindEditor 富文本取值问题var formDoms = data["form"];for(i=0,len=formDoms.length; i<len; i++){var idom = data["form"][i],idomName = data["form"][i].name,tagName = idom.tagName,idomId = data["form"][i].id,keditor = _self[idomName];if(idom.tagName == "TEXTAREA" && keditor){keditor.sync();data.field[idomName]=base64.encode($('#'+idomId ).val());}}var retData = $.getData(_self.url, data.field);if(retData.status!=1000 || retData.status == WebConst.FAIL){layer.msg('保存失败', {icon: 5});return false;}//如果有附件，上传附件var uploadAttachmentIds = $("#uploadAttachmentIds").data("uploadAttachmentIds"),entityId = retData.data;if(!uploadAttachmentIds && data.field["uploadAttachmentIds"]){uploadAttachmentIds = data.field["uploadAttachmentIds"];}if(true && uploadAttachmentIds && entityId){var params = {};if(uploadAttachmentIds instanceof Array){params.attachmentIds = uploadAttachmentIds.join(",");}else{params.attachmentIds = uploadAttachmentIds;}params.entityId = entityId;params.entityName="personalUser"; $.getData(CONTEXT_PATH + "/attach/updateEntityId", params);//$.getData(CONTEXT_PATH + "/attach/updateEntityName", params);}$("#uploadAttachmentIds").data("uploadAttachmentIds",null);layer.msg('保存成功', {icon: 6});return false;});});function beforeClose (){//如果涉及到文件上传，关闭卡片页面将未上传的附件进行删除var unuploadFiles = $("#uploadAttachmentIds").data("uploadAttachmentIds");if(unuploadFiles && unuploadFiles.length>0){var url = CONTEXT_PATH + '/attach/delete/datafile';$.getData(url,{'attachmentIds':unuploadFiles.join(",")});}}});后台
User实体类
private Attach picName;private String imagePath = null;public Attach getPicName() {return picName;}public void setPicName(Attach picName) {this.picName = picName;}public String getImagePath() {if(picName!=null && !StringUtil.isEmpty(picName.getAttachmentId())) {imagePath = "/attach/showPicture?attachmentId="+picName.getAttachmentId()+"&isThumbnail=true";}else {imagePath="暂无图片";}return imagePath;}public void setImagePath(String imagePath) {this.imagePath = imagePath;}
附件实体类
public class Attach implements Serializable{private static final long serialVersionUID = 1L;private String attachmentId;private String attachmentName; private String entityId;private String entityName;private String fieldName;public String getAttachmentName() {return attachmentName;}public void setAttachmentName(String attachmentName) {this.attachmentName = attachmentName;}public String getEntityId() {return entityId;}public void setEntityId(String entityId) {this.entityId = entityId;}public String getAttachmentId() {return attachmentId;}public void setAttachmentId(String attachmentId) {this.attachmentId = attachmentId;}public String getEntityName() {return entityName;}public void setEntityName(String entityName) {this.entityName = entityName;}public String getFieldName() {return fieldName;}public void setFieldName(String fieldName) {this.fieldName = fieldName;}}查询接口
<resultMap id="BaseResultMap" type="com.cnten.userCenter.user2.model.User" ><id column="USER_ID" property="userId" jdbcType="VARCHAR" /><association property="picName" column="USER_ID" select="com.userCenter.user.dao.AttachUserMapper.findById"></association></resultMap>
<resultMap id="BaseResultMap" type="com.cnten.userCenter.user2.model.Attach" ><id column="ATTACHMENT_ID" property="attachmentId" jdbcType="VARCHAR" /><result column="ATTACHMENT_NAME" property="attachmentName" jdbcType="VARCHAR" /><result column="ENTITY_ID" property="entityId" jdbcType="VARCHAR" /><result column="ENTITY_NAME" property="entityName" jdbcType="VARCHAR" /><result column="FIELD_NAME" property="fieldName" jdbcType="VARCHAR" /></resultMap><select id="findById" parameterType="String" resultMap="BaseResultMap"> select * from (select attachment_id from ATTACHMENT where ENTITY_ID=#{USER_ID} order by create_date desc) where rownum=1</select>上传附件js框架
(function(scope){var CardPager = Class.extend({init: function(filter, url){this.filter = filter;this.url = url;},render: function(afterRender){var _self = this;_self.initThirdPlugin(); //初始化第三放插件//plugins 这个可以不传，但是请不要传空数组过来var plugins = _self.plugins || ['form'];layui.use(plugins,function(){debugger;_self.initEvent();_self.initLayuiPlugin(); //初始化layui组件 //渲染表单数据debugger;var params = {};params[_self.primaryKey] = _self.primaryValue;$.ajaxReq(_self.dataUrl, params, function(data){if(data && data.status == WebConst.SUCCESS && data.data){debugger;var cardForm = $("#"+_self.filter+"Form"),formDoms = cardForm[0];cardForm.setValues(data.data);//处理富文本赋值问题for(i=0,len=formDoms.length; i<len; i++){var idom = formDoms[i],idomName = idom.name,tagName = idom.tagName,idomId = idom.id,keditor = _self[idomName];if(idom.tagName == "TEXTAREA" && keditor){keditor.html(data.data[idomName]);}} layui.form.render();}if(afterRender){afterRender(data,_self);}},WebConst.AJAX_FORM,null,false);});_self.initFiles();},initFiles: function(){var _self = this,attachParam = {};attachParam.entityId = _self.primaryValue;attachParam.entityName = _self.entityName;$.ajaxReq(CONTEXT_PATH + "/attach/entity/files", attachParam, function(data){if(data && data.status == WebConst.SUCCESS && data.data){var files = data.data;$("div[class='layui-upload']").each(function(index,obj){var containerId = $(obj).attr('id'),attachField = containerId.split("_")[0],tableBody = containerId + "_table";for(var i=0,len=files.length; i<len; i++){var cFile = files[i];if(cFile.fieldCode == attachField){var attachImg = "";if(!$.isEmptyStr(cFile.fileName) && (cFile.fileName.indexOf('docx')!=-1 || cFile.fileName.indexOf('doc')!=-1)){//attachImg = '<td><img src="' + CONTEXT_PATH +"platform/common/images/word.png" /></td>';attachImg = '<td><img src="'+CONTEXT_PATH+ '/platform/common/images/word.png"' +'width="100" height="60" style="cursor:pointer;"/></td>';}else if(!$.isEmptyStr(cFile.fileName) && cFile.fileName.indexOf('pdf')!=-1){attachImg = '<td><img src="'+CONTEXT_PATH+ '/platform/common/images/pdf.png"' +'width="100" height="60" style="cursor:pointer;"/></td>';}else{attachImg = '<td><img src="' + CONTEXT_PATH + '/attach/showPicture?attachmentId=' + cFile.attachmentId + '&isThumbnail=true" width="100" height="60" style="cursor:pointer;"/></td>';}var $tr = $(['<tr id="upload-'+ cFile.attachmentId +'" attatchmentId="'+ cFile.attachmentId +'">', attachImg,'<td>'+ cFile.fileName +'</td>','<td>'+ cFile.fileSize +' kb</td>','<td>'+ cFile.createDate +'</td>','<td>','<a class="layui-btn layui-btn-mini demo-reload" href="'+ CONTEXT_PATH +'/attach/download?attachmentId='+ cFile.attachmentId +'">下载</a> ','<button class="layui-btn layui-btn-mini layui-btn-danger">删除</button>','</td>','</tr>'].join(''));$tr.find('button').on('click',function(){var rlt = $.getData(CONTEXT_PATH + "/attach/delete/updflag",{'attachmentId':$(this).closest("tr").attr('attatchmentId')});if(rlt && rlt.status == '1000'){$(this).closest("tr").remove();}return false;});$("#" + tableBody).append($tr);}}})}},WebConst.AJAX_FORM,null,false);},initThirdPlugin: function(){},initLayuiPlugin: function(){var _self = this;},initEvent: function(){var _self = this;layui.form.on('submit(' + _self.filter + ')', function(data){//处理 KindEditor 富文本取值问题var formDoms = data["form"];for(i=0,len=formDoms.length; i<len; i++){var idom = data["form"][i],idomName = data["form"][i].name,tagName = idom.tagName,idomId = data["form"][i].id,keditor = _self[idomName];if(idom.tagName == "TEXTAREA" && keditor){keditor.sync();data.field[idomName]=base64.encode($('#'+idomId ).val());}}var retData = $.getData(_self.url, data.field);if(retData.status!=1000 || retData.status == WebConst.FAIL){if(!$.isEmptyStr(retData.message)){layer.msg(retData.message, {icon: 5});return false;}layer.msg('保存失败', {icon: 5});return false;}//如果有附件，上传附件var uploadAttachmentIds = $("#uploadAttachmentIds").data("uploadAttachmentIds"),entityId = retData.data;$("input[name='"+ _self.primaryKey +"']").val(retData.data);if(!uploadAttachmentIds && data.field["uploadAttachmentIds"]){uploadAttachmentIds = data.field["uploadAttachmentIds"];}if(true && uploadAttachmentIds && entityId){var params = {};if(uploadAttachmentIds instanceof Array){params.attachmentIds = uploadAttachmentIds.join(",");}else{params.attachmentIds = uploadAttachmentIds;}params.entityId = entityId;$.getData(CONTEXT_PATH + "/attach/updateEntityId", params);}$("#uploadAttachmentIds").data("uploadAttachmentIds",null);//新增之前回调函数if(_self.afterSave && $.isFunction(_self.afterSave)){_self.afterSave(retData);}else{layer.msg('保存成功', {icon: 6});}return false;});if (_self.act == "read") {$("#images_list_table").find("td").eq(4).text("");//隐藏附件的下载和删除按钮}}});scope.CardPager = CardPager;
})(window);layui上传附件通用js
/*** 上传附件通用JS （基于layerUI）*/
;(function($){var defaults = {url : "/attach/upload", fieldCode : "aboutDocument", //业务字段编码fieldName : "相关文件", //业务字段名称entityName : "template", //业务实体};function renderUpload(options){this.settings = $.extend({},defaults,options);this.settings.elem = "#" + this.settings.fieldCode;this.settings.bindAction = "#" + this.settings.fieldCode + "_Action"; //上传操作按钮 this.settings.layuiUploadPreview = "#"+ this.settings.fieldCode +"_preview";this.settings.previewTableBody = "#"+ this.settings.fieldCode +"_Preview_Table"; //上传预览表格this.init();}//为函数添加原型链上的方法renderUpload.prototype = {init: function(){var that = this;var uploadInst = layui.upload.render({elem: that.settings.elem //绑定元素,url: CONTEXT_PATH + that.settings.url //上传接口,accept:'file',data:{ //上传参数"entityName" : that.settings.entityName, //业务实体"fieldCode" : that.settings.fieldCode, //业务字段编码"fieldName" : that.settings.fieldName, //业务字段名称} ,auto:false //是否选完文件后自动上传 如果设定 false，那么需要设置 bindAction 参数来指向一个其它按钮提交上传,size:0 //设置文件最大可允许上传的大小，单位 KB。不支持ie8/9; 0（即不限制）,multiple:true//是否允许多文件上传。设置 true即可开启。不支持ie8/9,bindAction: that.settings.bindAction //指向一个按钮触发上传，一般配合 auto: false 来使用。值为选择器或DOM对象，如：bindAction: '#btn',choose: function(res){ //选择文件后的回调函数var layIndex = layer.open({type: 1,title: "预览",maxmin: false,area : ['40%', '40%'],content:$(that.settings.layuiUploadPreview).removeAttr('style'), //$.loadHtml(preUrl),success: function(layero){var demoListView = $(that.settings.previewTableBody).empty();var files = that.settings.selfFiles = res.pushFile(); //将每次选择的文件追加到文件队列//读取本地文件res.preview(function(index, file, result){var tr = $(['<tr id="upload-'+ index +'">','<td>'+ file.name +'</td>','<td>'+ (file.size/1024).toFixed(1) +' kb</td>','<td name="upload-status">等待上传</td>','<td>','<button class="layui-btn layui-btn-mini demo-reload layui-hide">重传</button>','<button class="layui-btn layui-btn-mini layui-btn-danger demo-delete">删除</button>','</td>','</tr>'].join(''));//单个重传tr.find('.demo-reload').on('click', function(){res.upload(index, file);});//删除tr.find('.demo-delete').on('click', function(){delete files[index]; //删除对应的文件tr.remove();uploadInst.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选if(Object.getOwnPropertyNames(files).length == 0){ //当上传预览没有文件时，关闭弹出框layer.close(layIndex);}});demoListView.append(tr);});},end : function(){ //layer销毁回调$(that.settings.layuiUploadPreview).attr('style','display:none;');$(that.settings.previewTableBody).empty();},cancel: function(){ //右上角关闭回调}});},before: function(res){ //文件提交上传前的回调$("tr",$(that.settings.previewTableBody)).find("td[name='upload-status']").text("上传中...");},done: function(res, index, upload){ //执行上传请求后的回调。返回三个参数，分别为：res（服务端响应信息）、index（当前文件的索引）、upload（重新上传的方法，一般在文件上传失败后使用）//上传完毕回调 "dealPicture_list_table"if(res && res.status == WebConst.SUCCESS){$(that.settings.bindAction).text("").text("上传成功");delete that.settings.selfFiles[index];//改变预览状态,将上传附件id存在 隐藏域中$("tr[id='upload-"+ index +"']",$(that.settings.previewTableBody)).find("td[name='upload-status']").text("附件缓存完毕，请点击提交上传附件");var unupload = $("#uploadAttachmentIds").data("uploadAttachmentIds");if(unupload){unupload.push(res.data['attachmentId']);$("#uploadAttachmentIds").data("uploadAttachmentIds",unupload);}else{if(res.data){$("#uploadAttachmentIds").data("uploadAttachmentIds",[res.data['attachmentId']]);/*** 第一个方法赋不了值，通过下面的赋值*/$("#uploadAttachmentIds").val([res.data['attachmentId']]);}}//处理卡片页面列表展示问题var afile = res.data;var attachImg = "";if(!$.isEmptyStr(afile.fileName) && (afile.fileName.indexOf('docx')!=-1 || afile.fileName.indexOf('doc')!=-1)){//attachImg = '<td><img src="' + CONTEXT_PATH +"platform/common/images/word.png" /></td>';attachImg = '<td><img src="'+CONTEXT_PATH+ '/platform/common/images/word.png"' +'width="100" height="60" style="cursor:pointer;"/></td>';}else if(!$.isEmptyStr(afile.fileName) && afile.fileName.indexOf('pdf')!=-1){attachImg = '<td><img src="'+CONTEXT_PATH+ '/platform/common/images/pdf.png"' +'width="100" height="60" style="cursor:pointer;"/></td>';}else{attachImg = '<td><img src="' + CONTEXT_PATH + '/attach/showPicture?attachmentId=' + afile.attachmentId + '&isThumbnail=true" max-width="120" width="100" height="60" style="cursor:pointer;"/></td>';}var $tr = $(['<tr id="upload-'+ afile.attachmentId +'" attatchmentId="'+ afile.attachmentId +'">', attachImg,'<td>'+ afile.fileName +'</td>','<td>'+ afile.fileSize +' kb</td>','<td>'+ afile.createDate +'</td>','<td>','<a class="layui-btn layui-btn-mini demo-reload" href="'+ CONTEXT_PATH +'/attach/download?attachmentId='+ afile.attachmentId +'">下载</a> ','<button class="layui-btn layui-btn-mini layui-btn-danger">删除</button>','</td>','</tr>'].join(''));$tr.find('button').on('click',function(){var attId = $(this).closest("tr").attr('attatchmentId');var url = CONTEXT_PATH + '/attach/delete/datafile';var rlt = $.getData(url,{'attachmentIds':attId});if(rlt && rlt.status == WebConst.SUCCESS){$(this).closest("tr").remove();$("#uploadAttachmentIds").data("uploadAttachmentIds").removeByValue(attId);}return false;});$("#" + afile.fieldCode + "_list_table").append($tr);}},error: function(index, upload){ //执行上传请求出现异常的回调（一般为网络异常、URL 404等）。返回两个参数，分别为：index（当前文件的索引）、upload（重新上传的方法）//请求异常回调}});}}//扩展jquery类方法$.extend({renderUpload : function(options){return new renderUpload(options);}});
})(jQuery);jsp嵌入layui上传附件组件
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/platform/views/cusviews/devMatainView/js/layui/css/layui.css">
<script type="text/javascript" src="<%=request.getContextPath() %>/platform/views/cusviews/devMatainView/js/layui/layui.js" charset="utf-8"></script>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<input id="root" type="hidden" value="${ctx }"/>
<input id="ids" type="hidden" value="<%=request.getParameter("ids") %>"/><!-- 文件上传 开始 --> <div class="layui-form-item layui-form-text"><div class="layui-input-block"><button type="button" class="layui-btn" id="fileAttachment"><i class="layui-icon"></i>上传文件</button><div class="layui-upload" id="fileAttachment_list"><div class="layui-upload-list"><table class="layui-table" id="tableid"><thead><tr><th width="13%">缩略图</th><th width="25%">文件名</th><th width="30%">文件路径</th><th width="17%">上传时间</th><th width="15%">操作</th></tr></thead><tbody id="fileAttachment_list_table"></tbody></table></div> </div> </div></div><!-- 文件预览 开始 --><div class="layui-upload" id="fileAttachment_preview" style="display:none;"><div class="layui-upload-list"><table class="layui-table"><thead><tr><th>文件名</th><th>大小</th><th>状态</th><th>操作</th></tr></thead><tbody id="fileAttachment_Preview_Table"></tbody></table></div><button type="button" class="layui-btn" id="fileAttachment_Action">开始上传</button></div>
<!-- 文件上传 结束 --><div class="btn"><a id="save">保存</a><a id="reset">重置</a></div><input type="hidden" id="afvFileId" name="afvFileId"/><input type="hidden" id="fileAtIds" name="fileAtIds"/><script type="text/javascript">
var fileRoot = $("#root").val();
layui.use('upload', function(){var upload = layui.upload;var that = this;//多文件列表示例var demoListView = $('#fileAttachment_Preview_Table'),uploadListIns = upload.render({elem: '#fileAttachment',url: fileRoot+'/file/upload',accept: 'file',multiple: true,data: {'tableName':"RECODR_MAINTAIN_VOLTAGE",'fieldName':"FILEATTACHMENT",'pkFieldName':"RECORD_VOLTAGE_ID",'entityId':function(){return $("#afvFileId").val();},isDelete:0},auto: false,bindAction: '#fileAttachment_Action',choose: function(res){ if ($("#afvFileId").val() == "") {alert("请先保存基础信息之后才能上传图片");return false;}var layIndex = layer.open({type: 1,title: "预览",maxmin: false,area : ['40%', '40%'],content:$("#fileAttachment_preview").removeAttr('style'), //$.loadHtml(preUrl),success: function(layero){var demoListView = $("#fileAttachment_Preview_Table").empty();var files = that.files = res.pushFile(); //将每次选择的文件追加到文件队列//读取本地文件res.preview(function(index, file, result){var tr = $(['<tr id="upload-'+ index +'">','<td>'+ file.name +'</td>','<td>'+ (file.size/1024).toFixed(1) +' kb</td>','<td name="upload-status">等待上传</td>','<td>','<button class="layui-btn layui-btn-mini demo-reload layui-hide">重传</button>','<button class="layui-btn layui-btn-mini layui-btn-danger demo-delete">删除</button>','</td>','</tr>'].join(''));//单个重传tr.find('.demo-reload').live('click', function(){res.upload(index, file);});//删除tr.find('.demo-delete').live('click', function(){delete files[index]; //删除对应的文件tr.remove();uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选if(Object.getOwnPropertyNames(files).length == 0){ //当上传预览没有文件时，关闭弹出框layer.close(layIndex);}});demoListView.append(tr);});},end : function(){ //layer销毁回调$("#fileAttachment_preview").attr('style','display:none;');$("#fileAttachment_Preview_Table").empty();},cancel: function(){ //右上角关闭回调}});},done: function(res, index, upload){if(res.retStatus == 1){ //上传成功var tr = demoListView.find('tr#upload-'+ index),tds = tr.children();tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');tds.eq(3).html(''); //清空操作delete that.files[index]; //删除文件队列已经上传成功的文件 */var afvFileId = $("#afvFileId").val();readFile(afvFileId);} },error: function(index, upload){var tr = demoListView.find('tr#upload-'+ index),tds = tr.children();tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传}});});/* 渲染附件 */
function readFile(afvFileId){debugger;var demoListView = $('#fileAttachment_Preview_Table');$.ajax({type:"post",dataType: "json", data : {"id":afvFileId},url:fileRoot+"/getFileAttachment",success:function(msg){debugger;if(msg&&msg.length>0){$("#tableid tbody").html("");//处理卡片页面列表展示问题for (var i = 0;i<msg.length;i++) {var afile = msg[i].data;var imageUrl = fileRoot+'/file?id='+afile.ATTACHMENTID;var html = '<img src='+imageUrl+' max-width="120" width="120" height="80" style="cursor:pointer;"/></td>';var $tr = $(['<tr id="upload-'+ afile.ATTACHMENTID +'" attatchmentId="'+ afile.ATTACHMENTID +'">','<td>' + html,'<td>'+ afile.ATTACHMENTNAME +'</td>','<td>'+ afile.FILEPATH +'</td>','<td>'+ afile.CREATEDATE +'</td>','<td>','<a class="layui-btn layui-btn-mini demo-reload" href="'+fileRoot+'/file/fileDown?id='+afile.ATTACHMENTID+'">下载</a> ','<button class="layui-btn layui-btn-mini layui-btn-danger" id="delButton">删除</button>','</td>','</tr>'].join(''));debugger;$tr.find('button').bind('click',function(){debugger;var attId = "";$(this).closest("tr").remove();$("#fileAttachment_list_table tr").each(function(index,item){attId += $(item).attr("attatchmentid")+",";});attId = attId.substr(0, attId.length - 1); var afvFileId = $("#afvFileId").val();var url = fileRoot+"/removeFileAttachment",params={"mainId":afvFileId,"attId":attId};$.ajax({type : "post",url : url,async : false,data : params,success : function(data){/* $("#uploadAttachmentIds").data("uploadAttachmentIds").removeByValue(attId); */return;}});});$("#fileAttachment_list_table").append($tr);}}}})
}
</script>js
var root = null;
var ids = null;$(document).ready(function() {root = $("#root").val();ids = $("#ids").val();initpage();
});function initpage(){root = $("#root").val();if(null!=ids&&ids.length>0){readAfv();readFile(ids);}var timer = "";$("#save").click(function(){/*保存之前，要先把数据库中FILEATTACHMENT查出来，然后一并保存*/var fileAtIds = "";if(null!=ids&&ids.length>0){param = {"ids":ids}$.ajax({ url:root + "/beforeSavePic", data:param, type:"post", dataType:"json",async: false,success:function(data){ debugger;fileAtIds = data;$("input[name='fileAtIds']").val(fileAtIds);}, error:function(){ alert("服务器正忙，请稍后重试"); } }) }else{var afvFId = $("input[name='afvFileId']").val();if(null!=afvFId&&afvFId.length>0){param = {"ids":afvFId}$.ajax({ url:root + "/beforeSavePic", data:param, type:"post", dataType:"json",async: false,success:function(data){ fileAtIds = data;$("input[name='fileAtIds']").val(fileAtIds);}, error:function(){ alert("服务器正忙，请稍后重试"); } }) }}afvSave(fileAtIds);$(this).attr("disabled", true); timer = setTimeout(function(){debugger;$("#save").attr("disabled", false); },20000);})}function afvSave(fileAtIds){var fileAtIds=$("input[name='fileAtIds']").val();param = {"fileAtIds":fileAtIds}$.ajax({ url:root + "/AddAfv", data:param, type:"post", dataType:"json", success:function(data){ /*保存之后，要把主键的值拿回来*/$("input[name='afvFileId']").val(data);$("input[id='ids']").val(data);alert("保存成功"); }, error:function(){ alert("服务器正忙，请稍后重试"); } }) }function readAfv(){var param = {"ids" : ids};var uxl = root + "/queryAfv";$.ajax({type : "POST",url : uxl,data : param,success : function(list) {$.each(list,function(index,obj){var afvFileId = obj.data.RECORD_VOLTAGE_ID;$("input[name='afvFileId']").val(afvFileId);});},error : function(data) {},});return true;
}
后台
@Controller
public class AddVoltageAfv {@SuppressWarnings("unchecked")@RequestMapping("/AddAfv")@ResponseBodypublic String Addxctyz(HttpServletRequest request, HttpServletResponse response) {String fileAtIds = request.getParameter("fileAtIds");JSONObject jsonObject = JSON.parseObject(requestParam);String addIds = "";if (null != ids && ids.length() > 0) {String delSql1 = "delete from RECODR_MAINTAIN_VOLTAGE where RECORD_VOLTAGE_ID=?";Object paramd1 = ids;SqlUtil.getExecutor().execute(delSql1.toString(), paramd1);String sqlSearch ="select decode(max(RECORD_VOLTAGE_ID),null,0,max(RECORD_VOLTAGE_ID)+1) RECORD_VOLTAGE_ID from RECODR_MAINTAIN_VOLTAGE";IBean queryOne = SqlUtil.getExecutor().queryOne(sqlSearch);addIds = queryOne.get("RECORD_VOLTAGE_ID", "");Object[] params = { addIds,orandid, volType,fileAtIds};String sql = "insert into RECODR_MAINTAIN_VOLTAGE(RECORD_VOLTAGE_ID,RECORD_VOLTAGE_DATE,DEVICEASSOC_ID,VOLTAGE_TYPE,FILEATTACHMENT) VALUES(?,(select to_char(sysdate, 'yyyy-mm-dd hh24:mi:ss') from dual),?,?,?)";SqlUtil.getExecutor().execute(sql.toString(), params);} else {String sqlSearch ="select decode(max(RECORD_VOLTAGE_ID),null,0,max(RECORD_VOLTAGE_ID)+1) RECORD_VOLTAGE_ID from RECODR_MAINTAIN_VOLTAGE";IBean queryOne = SqlUtil.getExecutor().queryOne(sqlSearch);addIds = queryOne.get("RECORD_VOLTAGE_ID", "");Object[] params = { addIds,orandid, volType,fileAtIds};String sql = "insert into RECODR_MAINTAIN_VOLTAGE(RECORD_VOLTAGE_ID,RECORD_VOLTAGE_DATE,DEVICEASSOC_ID,VOLTAGE_TYPE,FILEATTACHMENT) VALUES(?,(select to_char(sysdate, 'yyyy-mm-dd hh24:mi:ss') from dual),?,?,?)";SqlUtil.getExecutor().execute(sql.toString(), params);}return addIds;}@RequestMapping("/getFileAttachment")@ResponseBodypublic List<?> getFileAttachment(HttpServletRequest request, HttpServletResponse response) {String str = request.getParameter("id");String sql ="select t.fileattachment from recodr_maintain_voltage t where t.record_voltage_id ="+str;IBean queryOne = SqlUtil.getExecutor().queryOne(sql);String attachmentIds = queryOne.get("FILEATTACHMENT", "");String[] strs = attachmentIds.split(",");List<IBean> retList = new ArrayList<IBean>();for(String id:strs){String sqlids = "select a.* from BDC_ATTACHMENT a where a.attachmentid ="+id;IBean queryAttach = SqlUtil.getExecutor().queryOne(sqlids);retList.add(queryAttach);}return retList;}@RequestMapping("/beforeSavePic")@ResponseBodypublic String beforeSavePic(HttpServletRequest request, HttpServletResponse response) {String str = request.getParameter("ids");String sql ="select t.fileattachment from recodr_maintain_voltage t where t.record_voltage_id ="+str;IBean queryOne = SqlUtil.getExecutor().queryOne(sql);String attachmentIds = queryOne.get("FILEATTACHMENT", "");return attachmentIds;}@RequestMapping("/removeFileAttachment")@ResponseBodypublic Boolean removeFileAttachment(HttpServletRequest request){String mainId = request.getParameter("mainId");String attId = request.getParameter("attId");String sql = "update RECODR_MAINTAIN_VOLTAGE set FILEATTACHMENT = ? where RECORD_VOLTAGE_ID =?";Object[] params ={attId,mainId};boolean ztlist= SqlUtil.getExecutor().execute(sql, params);if(ztlist){return true;}else{return false;}}
layui上传附件控制上传附件大小
layui.use('upload', function(){var upload = layui.upload;var that = new Object();that.settings = {};that.settings.bindAction="#dealPicture_Action";that.settings.elem="#dealPicture";that.settings.entityName="advice";that.settings.fieldCode="dealPicture";that.settings.fieldName="上传附件";that.settings.layuiUploadPreview="#dealPicture_preview";that.settings.previewTableBody = "#dealPicture_Preview_Table";that.settings.selfFiles = null;that.settings.url="/attach/upload";//执行实例var uploadInst = upload.render({elem: that.settings.elem //绑定元素,url: CONTEXT_PATH + that.settings.url //上传接口,accept:'file',data:{ //上传参数"entityName" : that.settings.entityName, //业务实体"fieldCode" : that.settings.fieldCode, //业务字段编码"fieldName" : that.settings.fieldName, //业务字段名称} ,auto:false //是否选完文件后自动上传 如果设定 false，那么需要设置 bindAction 参数来指向一个其它按钮提交上传,size:0 //设置文件最大可允许上传的大小，单位 KB。不支持ie8/9; 0（即不限制）,multiple:true//是否允许多文件上传。设置 true即可开启。不支持ie8/9,bindAction: that.settings.bindAction //指向一个按钮触发上传，一般配合 auto: false 来使用。值为选择器或DOM对象，如：bindAction: '#btn',choose: function(res){ //选择文件后的回调函数debugger;var layIndex = layer.open({type: 1,title: "预览",maxmin: false,area : ['40%', '40%'],content:$(that.settings.layuiUploadPreview).removeAttr('style'), //$.loadHtml(preUrl),success: function(layero){var demoListView = $(that.settings.previewTableBody).empty();var files = that.settings.selfFiles = res.pushFile(); //将每次选择的文件追加到文件队列//读取本地文件res.preview(function(index, file, result){if((file.size/1024)>1024){layer.msg('上传的附件不能超过1M', {icon: 5});that.settings.selfFiles=null;delete files[index];layer.close(layIndex);return false;}var tr = $(['<tr id="upload-'+ index +'">','<td>'+ file.name +'</td>','<td>'+ (file.size/1024).toFixed(1) +' kb</td>','<td name="upload-status">等待上传</td>','<td>','<button class="layui-btn layui-btn-mini demo-reload layui-hide">重传</button>','<button class="layui-btn layui-btn-mini layui-btn-danger demo-delete">删除</button>','</td>','</tr>'].join(''));//单个重传tr.find('.demo-reload').on('click', function(){res.upload(index, file);});//删除tr.find('.demo-delete').on('click', function(){delete files[index]; //删除对应的文件tr.remove();uploadInst.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选if(Object.getOwnPropertyNames(files).length == 0){ //当上传预览没有文件时，关闭弹出框layer.close(layIndex);}});demoListView.append(tr);});},end : function(){ //layer销毁回调$(that.settings.layuiUploadPreview).attr('style','display:none;');$(that.settings.previewTableBody).empty();},cancel: function(){ //右上角关闭回调}});},before: function(res){ //文件提交上传前的回调$("tr",$(that.settings.previewTableBody)).find("td[name='upload-status']").text("上传中...");},done: function(res, index, upload){ //执行上传请求后的回调。返回三个参数，分别为：res（服务端响应信息）、index（当前文件的索引）、upload（重新上传的方法，一般在文件上传失败后使用）//上传完毕回调 "dealPicture_list_table"if(res && res.status == WebConst.SUCCESS){$(that.settings.bindAction).text("").text("上传成功");delete that.settings.selfFiles[index];//改变预览状态,将上传附件id存在 隐藏域中$("tr[id='upload-"+ index +"']",$(that.settings.previewTableBody)).find("td[name='upload-status']").text("附件缓存完毕，请点击提交上传附件");var unupload = $("#uploadAttachmentIds").data("uploadAttachmentIds");if(unupload){unupload.push(res.data['attachmentId']);$("#uploadAttachmentIds").data("uploadAttachmentIds",unupload);}else{if(res.data){$("#uploadAttachmentIds").data("uploadAttachmentIds",[res.data['attachmentId']]);/*** 第一个方法赋不了值，通过下面的赋值*/$("#uploadAttachmentIds").val([res.data['attachmentId']]);}}//处理卡片页面列表展示问题var afile = res.data;var attachImg = "";if(!$.isEmptyStr(afile.fileName) && (afile.fileName.indexOf('docx')!=-1 || afile.fileName.indexOf('doc')!=-1)){//attachImg = '<td><img src="' + CONTEXT_PATH +"platform/common/images/word.png" /></td>';attachImg = '<td><img src="'+CONTEXT_PATH+ '/platform/common/images/word.png"' +'width="100" height="60" style="cursor:pointer;"/></td>';}else if(!$.isEmptyStr(afile.fileName) && afile.fileName.indexOf('pdf')!=-1){attachImg = '<td><img src="'+CONTEXT_PATH+ '/platform/common/images/pdf.png"' +'width="100" height="60" style="cursor:pointer;"/></td>';}else{attachImg = '<td><img src="' + CONTEXT_PATH + '/attach/showPicture?attachmentId=' + afile.attachmentId + '&isThumbnail=true" max-width="120" width="100" height="60" style="cursor:pointer;"/></td>';}var $tr = $(['<tr id="upload-'+ afile.attachmentId +'" attatchmentId="'+ afile.attachmentId +'">', attachImg,'<td>'+ afile.fileName +'</td>','<td>'+ afile.fileSize +' kb</td>','<td>'+ afile.createDate +'</td>','<td>','<a class="layui-btn layui-btn-mini demo-reload" href="'+ CONTEXT_PATH +'/attach/download?attachmentId='+ afile.attachmentId +'">下载</a> ','<button class="layui-btn layui-btn-mini layui-btn-danger">删除</button>','</td>','</tr>'].join(''));$tr.find('button').on('click',function(){var attId = $(this).closest("tr").attr('attatchmentId');var url = CONTEXT_PATH + '/attach/delete/datafile';var rlt = $.getData(url,{'attachmentIds':attId});if(rlt && rlt.status == WebConst.SUCCESS){$(this).closest("tr").remove();$("#uploadAttachmentIds").data("uploadAttachmentIds").removeByValue(attId);}return false;});$("#" + afile.fieldCode + "_list_table").append($tr);}},error: function(index, upload){ //执行上传请求出现异常的回调（一般为网络异常、URL 404等）。返回两个参数，分别为：index（当前文件的索引）、upload（重新上传的方法）//请求异常回调}});});layui提交保存
layui.form.on('submit(pre)', function(data){//处理 KindEditor 富文本取值问题var formDoms = data["form"];for(i=0,len=formDoms.length; i<len; i++){var idom = data["form"][i],idomName = data["form"][i].name,tagName = idom.tagName,idomId = data["form"][i].id,keditor = _self[idomName];if(idom.tagName == "TEXTAREA" && keditor){keditor.sync();data.field[idomName]=base64.encode($('#'+idomId ).val());}}var retData = $.getData(_self.url, data.field);if(retData.status!=1000 || retData.status == WebConst.FAIL){layer.msg('保存失败', {icon: 5});return false;}//如果有附件，上传附件var uploadAttachmentIds = $("#uploadAttachmentIds").data("uploadAttachmentIds"),entityId = retData.data;$("input[name='"+ _self.primaryKey +"']").val(retData.data);if(!uploadAttachmentIds && data.field["uploadAttachmentIds"]){uploadAttachmentIds = data.field["uploadAttachmentIds"];}if(true && uploadAttachmentIds && entityId){var params = {};if(uploadAttachmentIds instanceof Array){params.attachmentIds = uploadAttachmentIds.join(",");}else{params.attachmentIds = uploadAttachmentIds;}params.entityId = entityId;$.getData(CONTEXT_PATH + "/attach/updateEntityId", params);}$("#uploadAttachmentIds").data("uploadAttachmentIds",null);//新增之前回调函数if(_self.afterSave && $.isFunction(_self.afterSave)){_self.afterSave(retData);}else{layer.msg('保存成功', {icon: 6});}return false;}); //关闭卡片页面之前回调function beforeClose (){//如果涉及到文件上传，关闭卡片页面将未上传的附件进行删除var unuploadFiles = $("#uploadAttachmentIds").data("uploadAttachmentIds");if(unuploadFiles && unuploadFiles.length>0){var url = CONTEXT_PATH + '/attach/delete/datafile';$.getData(url,{'attachmentIds':unuploadFiles.join(",")});}}十、layui点击列表行操作
<div class="lay_list"><table id="produceList" lay-filter="produceList"></table></div></div>ShowProduceList = ListPager.extend({init : function(container, primaryKey, url){//列表容器this.container = container;//主键字段this.primaryKey = primaryKey;//数据请求地址this.url = url;//界面需要引用的插件this.plugins = ['table', 'element', 'form', 'laydate', 'layer','carousel'];
// //弹出卡片界面的大小[60%,80%]
// this.cardSize = ['100%','100%'];
// //弹出卡片界面方式：页面层(这里content是一个普通的String):1;iframe层(content是一个URl):2this.cardPopStyle = 2;//每页大小 this.pageSize = 5;//列表头this.title = [[{field: 'planCode', title: '计划单号', width: 120},{field: 'workCode', title: '工程编号', width: 120},{field: 'workName', title: '工程名称', width: 120},{field: 'address', title: '工程地址', width: 120},{field: 'workTime', title: '作业日期及时间', width: 120},{field: 'workOrg', title: '作业单位', width: 120},{field: 'coopOrg', title: '配合单位', width: 120},{field: 'preLevel', title: '压力级制', width: 120},{field: 'isDownPre', title: '是否降压', width: 120},{field: 'state', title: '状态', width: 100},/* {fixed: 'right', title: '地图查看', align:'center',width: 80, toolbar: '#scanProduce'}*/]]; //插件是基于layui封装的， layOption是对layui的参数扩展（具体api参照layui属性）this.layOption = {};},initLayuiPlugin: function(){debugger;this._super();layui.table.on('row(produceList)',function(obj){var data = obj.data,url = CONTEXT_PATH + '/cusviews/produce/listProduce';var param = {workId : data.workId,page : 0,limit : 10}var retData = $.getData(url,param);/* if(1000 != retData.status){layer.msg('获取数据失败', {icon: 5});return;}*/var points = [];produce.removePoint();produce.removeLine();produce.closeInfoWindow();var data = retData.data;if(!$.isEmptyArray(data)){for(var i=0;i<data.length;i++){if($.isEmptyStr(data[i].lng) || $.isEmptyStr(data[i].lat)){continue;}var point = {"lng":data[i].lng,"lat":data[i].lat,};points.push(point)produce.centerAt(data[i].lng,data[i].lat);var drawPoint = {"lng":data[i].lng,"lat":data[i].lat,"type":pointType[1]}produce.drawPoint(drawPoint);var content= [];content.push("<div class='input-card content-window-card'>");content.push("<div style=\"padding:7px 0px 0px 0px;\">");content.push("<p class='input-item'>工程名称:"+ data[i].workName +"</p>");content.push("<p class='input-item'>计划单号:"+ data[i].planCode +"</p>");content.push("<p class='input-item'>作业等级:"+ data[i].workLevel +"</p>");content.push("<p class='input-item'>作业类别:"+ data[i].workType +"</p>");content.push("<p class='input-item'>是否降压:"+ data[i].isDownPre +"</p>");content.push("<p class='input-item'>作业状态:"+ data[i].state +"</p>");content.push("<p class='input-item'>作业时间:"+ data[i].workTime +"</p>");content.push("<p class='input-item'>作业单位:"+ data[i].workOrg +"</p>");content.push("<p class='input-item'>坐标x:"+ data[i].lng +"</p>");content.push("<p class='input-item'>坐标Y :"+data[i].lat +"</p></div></div>");drawPoint.type["infowindow"]={content:content.join(""),xoffset: 0,yoffset:-31,width:360,height:100};drawPoint.type["onClick"]=function(point,e){produce.showInfoWindow(point);}}}})},initEvent: function(){this._super();//TODO 父类仅仅绑定了工具条通用按钮事件， 如有其他事件请在这里定义},hookMethod:function(obj){}
});
$(function(){var url = CONTEXT_PATH + '/cusviews/produce/listProduce';var showProduceList = new ShowProduceList("produceList", "workId", url);showProduceList.render();$(".tc_box .cbar").scrollBar();
})
十二、layui页面列表加载回调事件
//利用layui 绘制列表 ( url : _self.url+"?decAjaxReq=yes", 给ajax请求加密)layui.use(plugins, function(){debugger;var option = $.extend({elem: "#" + _self.container, url : _self.url, cols: _self.title,method: RequestMethod.METHOD_POST,id : _self.tableId, even: true,page: true, //是否显示分页pageNum: 1,limit: _self.pageSize, //每页默认显示的数量limits:[5,10,15,20,30],done:function(res, curr, count){debugger;if(_self.afterDone && $.isFunction(_self.afterDone)){_self.afterDone(res, curr, count);}}}, _self.layOption);//展示已知数据layui.table.render(option);//渲染部分layui组件_self.initLayuiPlugin();//监听工具条layui.table.on('tool(' + _self.container + ')', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"if(_self.hookMethod && $.isFunction(_self.hookMethod)){_self.hookMethod(obj); //回调 子类中的 钩子方法}});//复选框事件选中以后回调layui.table.on('checkbox(' + _self.container + ')', function(obj){if(_self.tableAfterChecked && $.isFunction(_self.tableAfterChecked)){_self.tableAfterChecked(obj); //回调 子类中的 钩子方法}});}); initEvent: function(){this._super();//TODO 父类仅仅绑定了工具条通用按钮事件， 如有其他事件请在这里定义},afterDone:function(res, curr, count){debugger;Pile.drawPoint(res.data);}
十三、layOption的列表加载动态指定查询条件
<label><i class="iconfont"></i><span onclick="Device.clickDeviceType('station')">调压站</span><input type="checkbox" /></label><label><i class="iconfont"></i><span onclick="Device.clickDeviceType('box')">调压箱</span><input type="checkbox" /></label><label><i class="iconfont"></i><span onclick="Device.clickDeviceType('well')">闸井</span><input type="checkbox" /></label><label><i class="iconfont"></i><span onclick="Device.clickDeviceType('pile')">阴极桩</span><input type="checkbox" /></label>var Device = {/*** 定位坐标*/ setCenter:function(lng,lat){cntenMap.setCenter(lng,lat);},/*** 展示定位详情*/showInfoWindow:function(point){cntenMap.showInfoWindow(point);},/*** 显示不同设备列表* type:station-调压站 box-调压箱 well-闸井 pile-阴极桩*/clickDeviceType:function(type){if($.isEmptyStr(type)){return;}var url = "";switch(type){case 'station':url = CONTEXT_PATH + "/cusviews/dev/showStationList/1";Device.removeDevicePoints(boxPoints);Device.removeDevicePoints(wellPoints);Device.removeDevicePoints(pilePoints);break;case 'box':url = CONTEXT_PATH + "/cusviews/dev/showStationList/2";Device.removeDevicePoints(stationPoints);Device.removeDevicePoints(wellPoints);Device.removeDevicePoints(pilePoints);break;case 'well':url = CONTEXT_PATH + "/cusviews/dev/showWellList";Device.removeDevicePoints(stationPoints);Device.removeDevicePoints(boxPoints);Device.removeDevicePoints(pilePoints);breakcase 'pile':url = CONTEXT_PATH + "/cusviews/dev/showPileList";Device.removeDevicePoints(stationPoints);Device.removeDevicePoints(boxPoints);Device.removeDevicePoints(wellPoints);break;default:break;}$("#deviceListDiv").css("display","block");$("#deviceListDiv").load(url)}, @RequestMapping("/showStationList/{type}")public String showStationList(@PathVariable("type")String type,ModelMap model){model.addAttribute("stationType", type);return "cusviews/v_devices/stationList";} <form id="stationList-QueryForm"><div class="side_search"><input type="text" name="hasAlarm" placeholder="请输入搜索内容" /><a id="search" action="listQuery(this,event)">搜索</a></div></form><div class="lay_list"><table id="stationList" lay-filter="stationList"></table>
</div>
<div>
<input type="hidden" value="${stationType!''}" id="stationType">
</div>
<script src="${rc.contextPath}/view/cusviews/v_devices/js/showStationList.js"></script>ShowStationList = ListPager.extend({init : function(container, primaryKey, url){//列表容器this.container = container;//主键字段this.primaryKey = primaryKey;//数据请求地址this.url = url;//界面需要引用的插件this.plugins = ['table', 'element', 'form', 'laydate', 'layer'];
// //弹出卡片界面的大小[60%,80%]
// this.cardSize = ['100%','100%'];
// //弹出卡片界面方式：页面层(这里content是一个普通的String):1;iframe层(content是一个URl):2this.cardPopStyle = 2;//每页大小 this.pageSize = 5;//列表头this.title = [[{field: 'deviceName', title: '设备名称', width: 160},{field: 'deviceCode', title: '设备编号', width: 160},{field: 'startDate', title: '启用日期', width: 160},{field: 'deviceSpec', title: '设备规格', width: 160},{field: 'deviceModel', title: '设备型号', width: 160},{field: 'runState', title: '是否正常', width: 160},]]; //插件是基于layui封装的， layOption是对layui的参数扩展（具体api参照layui属性）this.layOption = {where:{preBoxType:$("#stationType").val()}};},
}
$(function(){var url = CONTEXT_PATH + '/cusviews/dev/listStation';var showStationList = new ShowStationList("stationList", "deviceId", url);showStationList.render();Station.drawPoint();$(".tc_box .cbar").scrollBar();
})(function(scope){var ListPager = Class.extend({init: function(){},render: function(){var _self = this;//弹出卡片界面的大小[60%,80%]_self.cardSize = _self.cardSize || ['80%','80%'];//弹出卡片界面方式：页面层(这里content是一个普通的String):1;iframe层(content是一个URl):2_self.cardPopStyle = _self.cardPopStyle || LayuiPopStyle.LAYUI_IFRAME_LAYER;_self.tableId = _self.container + "." + _self.primaryKey;//plugins 这个可以不传，但是请不要传空数组过来var plugins = _self.plugins || ['table','form'];var p = _self.assemblyFormPrams();//利用layui 绘制列表 ( url : _self.url+"?decAjaxReq=yes", 给ajax请求加密)layui.use(plugins, function(){var option = $.extend({elem: "#" + _self.container, url : _self.url, cols: _self.title,method: RequestMethod.METHOD_POST,id : _self.tableId, even: true,page: true, //是否显示分页pageNum: 1,limit: _self.pageSize, //每页默认显示的数量limits:[5,10,15,20,30]}, _self.layOption);//展示已知数据layui.table.render(option);scope.ListPager = ListPager;
})(window);十四、layui templet 固定列
{field: 'viewState', title: '查看', width: 100,templet:'#viewStateTpl'}, <div class="lay_list"><table id="produceList" lay-filter="produceList"></table><script type="text/html" id="viewStateTpl">{{# if(d.lng === null || d.lat === null){ }}<span style="color:#ccc" >查看</span>{{# } else { }}<span class="color:#F00">查看</span>{{# } }}</script></div></div>
layui列表框架
(function(scope){var ListPager = Class.extend({init: function(){},render: function(){var _self = this;//弹出卡片界面的大小[60%,80%]_self.cardSize = _self.cardSize || ['80%','80%'];//弹出卡片界面方式：页面层(这里content是一个普通的String):1;iframe层(content是一个URl):2_self.cardPopStyle = _self.cardPopStyle || LayuiPopStyle.LAYUI_IFRAME_LAYER;_self.tableId = _self.container + "." + _self.primaryKey;//plugins 这个可以不传，但是请不要传空数组过来var plugins = _self.plugins || ['table','form'];var p = _self.assemblyFormPrams();//利用layui 绘制列表 ( url : _self.url+"?decAjaxReq=yes", 给ajax请求加密)layui.use(plugins, function(){var option = $.extend({elem: "#" + _self.container, url : _self.url, cols: _self.title,method: RequestMethod.METHOD_POST,id : _self.tableId, even: true,page: true, //是否显示分页pageNum: 1,limit: _self.pageSize, //每页默认显示的数量limits:[5,10,15,20,30]}, _self.layOption);//展示已知数据layui.table.render(option);//渲染部分layui组件_self.initLayuiPlugin();//监听工具条layui.table.on('tool(' + _self.container + ')', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"if(_self.hookMethod && $.isFunction(_self.hookMethod)){_self.hookMethod(obj); //回调 子类中的 钩子方法}});//复选框事件选中以后回调layui.table.on('checkbox(' + _self.container + ')', function(obj){if(_self.tableAfterChecked && $.isFunction(_self.tableAfterChecked)){_self.tableAfterChecked(obj); //回调 子类中的 钩子方法}});});//界面绘制完成， 初始化界面事件_self.initEvent();},initLayuiPlugin: function(){var _self = this;},initEvent: function(){var _self = this;//列表 增删改查$("div[name='listBtns'] button").unbind('click').bind('click', function(){var action = "_self." + $(this).attr("action");eval(action);});//列表查询、重置$("div button[type='button']",$("#" + _self.container + "-QueryForm")).unbind('click').bind('click', function(){var action = "_self." + $(this).attr("action");eval(action);});},assemblyFormPrams: function(){ //组装列表模糊查询表单数据var _self = this;var formParam = $("#" + _self.container + "-QueryForm").serializeArray(),reqParam = {};for(var o in formParam){if(formParam[o]["name"]){reqParam[formParam[o]["name"]] = formParam[o]["value"];}}return reqParam;},listQuery: function(){var _self = this;layui.table.reload(_self.tableId, {where: _self.assemblyFormPrams()});},/*** 获取选中的数据*/getSelectRows: function(){var checkStatus = layui.table.checkStatus(this.tableId);return checkStatus.data;},getSelectIds: function(){var data = this.getSelectRows();var ids = [];if($.isEmptyArray(data))return ids;for(var i = 0; i < data.length; i++){ids.push(data[i][this.primaryKey]);}return ids;},view: function(curDom, event){var _self = this;var data = _self.getSelectRows();if (data.length != 1) { layer.msg("请选中一条数据进行查看");return;}var url = $(curDom).attr("url") + "?act=" + WebConst.READ + "&entityId=" + data[0][_self.primaryKey];var title = $(curDom).attr("title");var layIndex = layer.open({type: this.cardPopStyle,title: title,maxmin: true,shadeClose: true, //开启遮罩关闭area : this.cardSize,content: this.cardPopStyle == LayuiPopStyle.LAYUI_CONTENT_LAYER ? $.loadHtml(url) : url,success: function(layero){layero = _self.cardPopStyle == LayuiPopStyle.LAYUI_CONTENT_LAYER ? layero : layer.getChildFrame('body', layIndex);if(_self.cardPopStyle == LayuiPopStyle.LAYUI_CONTENT_LAYER){layero.setValues(data[0]);}layui.form.render();}});},add: function(curDom, event){var _self = this;//新增之前回调函数if(_self.beforeAdd && $.isFunction(_self.beforeAdd)){_self.beforeAdd();}var url = $(curDom).attr("url") + "?act=" + WebConst.ADD;var title = $(curDom).attr("title");layer.open({type: this.cardPopStyle,title: title,area: this.cardSize,maxmin: true,shadeClose: false, //开启遮罩关闭content: this.cardPopStyle == LayuiPopStyle.LAYUI_CONTENT_LAYER ? $.loadHtml(url) : url,success : function(layero){layui.form.render();},end: function(){ //销毁列表回调方法layui.table.reload(_self.tableId)if(_self.closeCard && $.isFunction(_self.closeCard)){return _self.closeCard();}return false;},cancel: function(){}});},edit: function(curDom, event){var _self = this;var data = _self.getSelectRows();if (data.length != 1) { layer.msg("请选中一条数据进行修改");return;}//修改之前回调函数if(_self.beforeUpd && $.isFunction(_self.beforeUpd)){_self.beforeUpd();}var url = $(curDom).attr("url") + "?act=" + WebConst.EDIT + "&entityId=" + data[0][_self.primaryKey];var title = $(curDom).attr("title");var layIndex = layer.open({type: this.cardPopStyle,title: title,maxmin: true,shadeClose: false, //开启遮罩关闭area : this.cardSize,content: this.cardPopStyle == LayuiPopStyle.LAYUI_CONTENT_LAYER ? $.loadHtml(url) : url,success: function(layero){layero = _self.cardPopStyle == LayuiPopStyle.LAYUI_CONTENT_LAYER ? layero : layer.getChildFrame('body', layIndex);if(_self.cardPopStyle == LayuiPopStyle.LAYUI_CONTENT_LAYER){layero.setValues(data[0]);layui.form.render();}},end: function(){ //销毁列表回调方法layui.table.reload(_self.tableId)if(_self.closeCard && $.isFunction(_self.closeCard)){return _self.closeCard();}return false;},cancel: function(){ //点击左上角关闭按钮回调方法if(_self.cardPopStyle == LayuiPopStyle.LAYUI_IFRAME_LAYER){ //从列表调用卡片页面数据var frameId = document.getElementById('layui-layer' + layIndex).getElementsByTagName("iframe")[0].id,closeCallback = $('#'+frameId)[0].contentWindow.beforeClose;if(closeCallback && $.isFunction(closeCallback)){return closeCallback();}}}});},del: function(curDom, event){var _self = this;var data = _self.getSelectIds();if(data.length == 0){layer.msg("请至少选择一条需要删除的数据");return;}var url = $(curDom).attr("url") + "?act=" + WebConst.DELETE;layer.confirm('确定删除吗', function(index){layer.close(index);$.ajaxReq(url,$.toJSON(data),function(){layui.table.reload(_self.tableId)});});}});scope.ListPager = ListPager;
})(window);Class.js
/* Simple JavaScript Inheritance* By John Resig http://ejohn.org/* MIT Licensed.*/
// Inspired by base2 and Prototype
(function(){//initializing是为了解决我们之前说的继承导致原型有多余参数的问题。当我们直接将父类的实例赋值给子类原型时。是会调用一次父类的构造函数的。所以这边会把真正的构造流程放到init函数里面，通过initializing来表示当前是不是处于构造原型阶段，为true的话就不会调用init。//fnTest用来匹配代码里面有没有使用super关键字。对于一些浏览器`function(){xyz;}`会生成个字符串，并且会把里面的代码弄出来，有的浏览器就不会。`/xyz/.test(function(){xyz;})`为true代表浏览器支持看到函数的内部代码，所以用`/\b_super\b/`来匹配。如果不行，就不管三七二十一。所有的函数都算有super关键字，于是就是个必定匹配的正则。var initializing = false, fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/;// The base Class implementation (does nothing)// 超级父类this.Class = function(){};// Create a new Class that inherits from this class// 生成一个类，这个类会具有extend方法用于继续继承下去Class.extend = function(prop) {//保留当前类，一般是父类的原型//this指向父类。初次时指向Class超级父类var _super = this.prototype;// Instantiate a base class (but only create the instance,// don't run the init constructor)//开关 用来使原型赋值时不调用真正的构成流程initializing = true;var prototype = new this();initializing = false;// Copy the properties over onto the new prototypefor (var name in prop) {// Check if we're overwriting an existing function//这边其实就是很简单的将prop的属性混入到子类的原型上。如果是函数我们就要做一些特殊处理prototype[name] = typeof prop[name] == "function" &&typeof _super[name] == "function" && fnTest.test(prop[name]) ?(function(name, fn){//通过闭包，返回一个新的操作函数.在外面包一层，这样我们可以做些额外的处理return function() {var tmp = this._super;// Add a new ._super() method that is the same method// but on the super-class// 调用一个函数时，会给this注入一个_super方法用来调用父类的同名方法this._super = _super[name];// The method only need to be bound temporarily, so we// remove it when we're done executing//因为上面的赋值，是的这边的fn里面可以通过_super调用到父类同名方法var ret = fn.apply(this, arguments); //离开时 保存现场环境，恢复值。this._super = tmp;return ret;};})(name, prop[name]) :prop[name];}// 这边是返回的类，其实就是我们返回的子类function Class() {// All construction is actually done in the init methodif ( !initializing && this.init )this.init.apply(this, arguments);}// 赋值原型链，完成继承Class.prototype = prototype;// 改变constructor引用Class.prototype.constructor = Class;// 为子类也添加extend方法Class.extend = arguments.callee;return Class;};
})();
ShowPipeList = ListPager.extend({init : function(container, primaryKey, url){debugger;//列表容器this.container = container;//主键字段this.primaryKey = primaryKey;//数据请求地址this.url = url;//界面需要引用的插件this.plugins = ['table', 'element', 'form', 'laydate', 'layer','carousel'];
// //弹出卡片界面的大小[60%,80%]
// this.cardSize = ['100%','100%'];
// //弹出卡片界面方式：页面层(这里content是一个普通的String):1;iframe层(content是一个URl):2this.cardPopStyle = 2;//每页大小 this.pageSize = 5;//列表头this.title = [[{field: 'checkDate', title: '运行日期', width: 160},{field: 'userRegion', title: '用户区域', width: 160},{field: 'runUser', title: '运行人员', width: 160},{field: 'dayCovRate', title: '党日覆盖率', width: 160},{field: 'cycleCovRate', title: '周期覆盖率', width: 160},{field: 'startTime', title: '开始时间', width: 160},{field: 'endTime', title: '结束时间', width: 160},{field: 'organization', title: '部门', width: 160},{fixed: 'right', title: '轨迹查看', align:'center',width: 80, toolbar: '#scanPipe'}]]; //插件是基于layui封装的， layOption是对layui的参数扩展（具体api参照layui属性）this.layOption = {};},initLayuiPlugin: function(){this._super();var table = layui.table;var laydate = layui.laydate;//时间选择器laydate.render({elem: '#test5',type: 'time',theme: '#050a3c'});laydate.render({elem: '#test6',type: 'time',theme: '#050a3c'});},initEvent: function(){this._super();//TODO 父类仅仅绑定了工具条通用按钮事件， 如有其他事件请在这里定义},hookMethod:function(obj){var data = obj.data,url = CONTEXT_PATH + '/cusviews/pipe/listPipePoint';var param = {cobwebId : data.cobwebId}var retData = $.getData(url,param);if(1000 != retData.status){layer.msg('获取数据失败', {icon: 5});return;}var points = [];pipe.removePoint();pipe.removeLine();pipe.closeInfoWindow();var data = retData.data;if(!$.isEmptyArray(data)){for(var i=0;i<data.length;i++){if($.isEmptyStr(data[i].lng) || $.isEmptyStr(data[i].lat)){continue;}var point = {"lng":data[i].lng,"lat":data[i].lat,};points.push(point)pipe.centerAt(data[i].lng,data[i].lat);var drawPoint = {"lng":data[i].lng,"lat":data[i].lat,"type":pointType[1]}if(0 == i){drawPoint.type = pointType[3]}else if((data.length - 1) == i){drawPoint.type = pointType[4]}var info = [];info.push("<div class='info' style='width: 300px; height: 86px;'>");info.push("<div class='info-top'>");/*info.push("<div>"+userArea+"</div>");*/info.push("<a class='iconfont' onclick='pipe.closeInfoWindow()'></a></div>");info.push("<div class=;info-middle'>");info.push("<div class='tCon' id='stationDiv'>");info.push("<div class='tList'>");info.push("<p class='input-item'>开始时间:"+ data[i].startTime +"</p>");info.push("<p class='input-item'>结束时间:"+ data[i].endTime +"</p>");info.push("<p class='input-item'>检测人 :"+data[i].checkUser +"</p></div></div></div>");drawPoint.type["infowindow"] ={content: info.join(""),xoffset: 0,yoffset:-31,width:360,height:100};drawPoint.type["onClick"] = function(point, e,i){pipe.showInfoWindow(point); }if(0 == i||(data.length - 1) == i){pipe.drawPoint(drawPoint);}}pipe.drawLine(points);}}
});
$(function(){var url = CONTEXT_PATH + '/cusviews/pipe/listPipe';var showPipeList = new ShowPipeList("pipeList", "cobwebId", url);showPipeList.render();$(".tc_box .cbar").scrollBar();
})
js模拟了java，闭包内部定义了一个'构造函数',通过实例化new this()；来动态获取当前对象
layui框架使用与代码编写相关推荐
- 为数据访问代码编写测试–不测试框架
当我们向数据访问代码编写测试时,是否应该测试其公共API的每种方法? 一开始听起来很自然. 毕竟,如果我们不对所有内容进行测试,那么如何知道我们的代码可以按预期工作呢? 这个问题为我们提供了重要的线索 ...
- PC微信hook基础框架代码编写--＞获取微信日志
PC微信hook基础框架代码编写-->获取微信日志 一. 封装微信hook框架和一些基本功能 1. 新建一个dll工程 2. 新建一个CHook类 并编写对应的函数 3. 新建一个CTools工 ...
- java文件正确编写格式_java Srpingboot框架书写mapper代码的正确格式
java Srpingboot框架书写mapper代码的正确格式 发布时间:2019-07-16原创 阅读(326) 最近新项目使用的是springboot框架,很多地方比以往的spring框架做了简 ...
- selinum自动化测试代码编写框架
完成一个网页的自动化测试代码编写的步骤总结 一.引入头文件: from selenium import webdriver #用于查找网页元素 from selenium.webdriver.comm ...
- layui table reload post请求_如何实现在Layui框架中完成父窗口刷新（更新）
最近有个项目使用Layui框架进行后端系统的界面搭建,其中Layui框架中的Layer组件在项目中会用得非常多.且有些功能会遇到子窗口完成数据的提交后,进行关闭同时会刷新父窗口的数据,所以此文章分享一 ...
- layUi框架入门篇（一）
layUi框架学习笔记(一) 整理人:LF 时间:2017-9-1 表示今天第一次听说了layui的前端框架,上网搜了很多的资料和图示,对比了一下自己辛辛苦苦写了十天的网页样式,最后不得不感叹前端框架 ...
- Layui框架实现图片上传
Layui框架实现图片上传 前言: 一直以来,图片上传总是件很麻烦的事.最近在学layui,发现layui真是极大简化了各种复杂的操作,避免了繁琐的开发. layui图片上传和传统的图片上传不同,它并 ...
- 前端学习之LayUi框架基础
今天笔者学习了LayUi框架的一些基础内容,总体来说,LayUi框架比BootStrap框架更倾向于后台的搭建和使用,样式更加多样,说明也对国人更加友好,毕竟是国人开发的框架嘛~废话不多少,开始介绍. ...
- layui框架是什么？
layui框架是什么? layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用.其外在极简,却又不失饱满的内在 ...
最新文章
- U3D屏幕坐标，世界坐标，像素坐标之间的关系
- Knative 实战：基于阿里云 Kafka 实现消息推送
- Qt 中static_cast 和 reinterpret_cast的区别
- allavsoft mac版：支持从各种视频分享网站下载视频
- 带你了解APP开发的具体流程
- 四种JSON解析工具--（json-libJacksonGsonFastJson）
- 看完这篇文章，还不知道怎么学单片机，来打我！
- 机器学习sklearn（13）层次聚类
- const注意点（对象赋值）
- AI-Tensorflow—Windows7安装TensorFlow方法
- T-BOX,OBD区别
- 小升初冲击SSF未遂，进入“帝都理工附中
- 【Camera】手机相机自动对焦的3种方式及原理
- 送书【新书】 |《python数据科学实战》
- The page has expired due to inactivity. Please refresh and try again.
- 朴素贝叶斯、贝叶斯网络分类器
- 【锁机制】MySQL锁机制
- 新商用密码产品认证梳理——参考资料篇
- 阿里云国际版设置DNS托管和智能分流教程详解
- （附源码）springboot手工diy网站 毕业设计 310226