bootstrap列表，上传组件
来源：互联网 发布：mac开机有声音但是黑屏 编辑：程序博客网 时间：2024/06/14 11:26
1.proinfo.jsp<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="<%=path%>/static/ace/css/bootstrap.css" /> <link href="<%=path%>/static/css/pns-ui.min.css" rel="stylesheet"> <link href="<%=path%>/static/css/pns-ui-append.min.css" rel="stylesheet"> <link href="<%=path%>/static/js/laypage/skin/laypage.css" rel="stylesheet"> <link href="<%=path%>/static/bootstrap-3.3.7/css/bootstrapValidator.css" rel="stylesheet"> <link rel="stylesheet" href="<%=path%>/static/fileinput/css/fileinput.min.css" /> <style type="text/css"> .panel{ border-Radius:0px; } .panel-info{ margin-bottom: 0px; } .panel-heding2{ padding-top: 4px; padding-bottom: 4px; } .pic_p{ text-align: center; padding-top: 1px; margin-bottom: 1px; } .upload_panel{ padding:0px; } .mydiv{ padding-top: 40px; font-size: 14px; } .radio-inline2{ margin-left: 54px; } .rr{text-align: right;padding-right: 0px;} .thumbnail img{ height:150px;} </style> </head> <body> <div class="panel panel-primary"> <div class="panel-body" id="orgdiv"> <div id="winlist"> <!--------------------- 查询from ------------------------------> <form class="form-horizontal" action="<%=path%>/proinfo/listPage" role="form" method="post" id="listForm"> <input type="hidden" name="page" value="1" /> <div class="form-group"> <label for="firstname" class="col-sm-2 control-label">条形码</label> <div class="col-sm-2"><input type="text" class="form-control" name="bar_code" id="bar_code"></div> <label for="firstname" class="col-sm-2 control-label">产品类别</label> <div class="col-sm-2"><input type="text" class="form-control" name="type" id="type"></div> <label for="firstname" class="col-sm-2 control-label">产品名称</label> <div class="col-sm-2"><input type="text" class="form-control" name="pro_name" id="pro_name"></div> </div> <div class="form-group"> <label class="col-sm-2 control-label">生产公司编码</label> <div class="col-sm-2"><input type="text" class="form-control" name="org_no" id="org_no"></div> <label class="col-sm-4 control-label"></label> <div class="col-sm-1"> <button type="button" class="btn btn-primary btn-sm" id="search"> <span class="glyphicon glyphicon-search" aria-hidden="true"></span> 查询</button> </div> <div class="col-sm-1"> <button type="button" class="btn btn-primary btn-sm" id="insert"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 新建</button> </div> <div class="col-sm-1"> <button type="button" class="btn btn-primary btn-sm" id="update"> <span class="glyphicon glyphicon-edit" aria-hidden="true"></span> 修改</button> </div> <div class="col-sm-1"> <button type="button" class="btn btn-primary btn-sm" id="del"> <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> 删除</button> </div> </div> </form> <!-- 数据列表 --> <table class="table" id="table"> <thead> <tr> <th></th> <th>条形码</th> <th>产品类别</th> <th>产品名称</th> <th>生产公司编码</th> <th>描述</th> <th>微信二维码</th> <th>品牌</th> <th>销售区域</th> <th>产地</th> <th>贮存方法</th> <th>规格</th> <th>食用禁忌</th> <th>订购电话</th> <th>在线购买</th> <th>查询次数</th> </tr> </thead> <tbody id="view1"> </tbody> </table> <!-- 页码区 --> <div class="sui-row-fluid"> <div class="span3"></div> <div class="span6"> <div id="page1" class="tables_paginate sui-text-center"> <div name="laypage1.2" class="laypage_main laypageskin_default" id="laypage_0"></div> </div> </div> <div class="span3"></div> </div> </div> <!-------------------- 新增修改from -------------------> <div id="winadd" style="display: none"> <form class="form-horizontal" action="" role="form" method="get" id="addForm"> <input type="hidden" id="id" value=""/> <div class="form-group"></div> <div class="form-group"></div> <div class="form-group"></div> <div class="form-group"> <label for="firstname" class="col-sm-2 control-label">条形码</label> <div class="col-sm-3"><input type="text" name="bar_code1" class="form-control" id="bar_code1" ></div> <label for="firstname" class="col-sm-2 control-label">产品名称</label> <div class="col-sm-3"><input type="text" name="pro_name1" class="form-control" id="pro_name1"></div> </div> <div class="form-group"> <label class="col-sm-2 control-label">产品类别</label> <div class="col-sm-3"> <select class="form-control" id="type1" name="type1" > <option value="0">---请选择---</option> <option value="01">农产品</option> <option value="02">加工食品</option> <option value="03">药品</option> </select> </div> <label class="col-sm-2 control-label">生产公司代码</label> <div class="col-sm-3"><input type="text" class="form-control" id="org_no1"></div> <div class="col-sm-1"> <button type="button" class="btn btn-default btn-sm" onclick="orgView();"> <span class="glyphicon glyphicon-search" aria-hidden="true"></span></button></div> </div> <div class="form-group"> <label class="col-sm-2 control-label">品牌</label> <div class="col-sm-3"><input type="text" class="form-control" id="brand1"></div> <label class="col-sm-2 control-label">销售区域</label> <div class="col-sm-3"><input type="text" class="form-control" id="area1"></div> </div> <div class="form-group"> <label class="col-sm-2 control-label">产地</label> <div class="col-sm-3"><input type="text" class="form-control" id="origin1"></div> <label class="col-sm-2 control-label">保存提示</label> <div class="col-sm-3"><input type="text" class="form-control" id="keep1"></div> </div> <div class="form-group"> <label class="col-sm-2 control-label">包装</label> <div class="col-sm-3"><input type="text" class="form-control" id="specifications1"></div> <label class="col-sm-2 control-label">禁忌</label> <div class="col-sm-3"><input type="text" class="form-control" id="taboo1"></div> </div> <div class="form-group"> <label class="col-sm-2 control-label">订购电话</label> <div class="col-sm-3"><input type="text" class="form-control" id="order_phone1"></div> <label class="col-sm-2 control-label">网上商城</label> <div class="col-sm-3"><input type="text" class="form-control" id="buy_online1"></div> </div> <div class="form-group"> <label class="col-sm-2 control-label">描述</label> <div class="col-sm-8"><input type="text" class="form-control" id="pro_describe1"></div> </div> <div class="form-group"></div> <div class="form-group"></div> <div class="form-group"> <label class="col-sm-5 control-label"></label> <div class="col-sm-1"> <button type="button" class="btn btn-primary btn-sm" id="save"> <span class="glyphicon glyphicon-saved" aria-hidden="true"></span> 保存</button> </div> <div class="col-sm-1"> <button type="button" class="btn btn-primary btn-sm" id="cancel"> <span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span> 取消</button> </div> <label class="col-sm-5 control-label"></label> </div> </form> </div> <!-- ----------------图片上传 start-----------------> <div id="winpic" style="display: none"> <!-- 上传面板 --> <div class="panel panel-info "> <div class="panel-heading panel-heding2"> <h3 class="panel-title">图片上传</h3> </div> <div class="panel-body"> <div class="form-group"> <div class="col-sm-4 mydiv"> <div class="row"> <label class="col-sm-4 control-label rr">商品条形码：</label> <div class="col-sm-8"><p id="barcode2"></p></div> </div> <div class="row"> <label class="col-sm-4 control-label rr">商品名称：</label> <div class="col-sm-8"><p id="proname2"></p></div> </div> <div class="row"> <label class="col-sm-4 control-label"></label> <div class="col-sm-8"><p></p></div> </div> <div class="row"> <label class="radio-inline radio-inline2"> <input type="radio" name="optionsRadiosinline" value="01" checked="checked"> 检测报告 </label> <label class="radio-inline"> <input type="radio" name="optionsRadiosinline" value="02"> 商标认证 </label> </div> <div class="row"> <label class="radio-inline radio-inline2"> <input type="radio" name="optionsRadiosinline" value="03"> 产品图片 </label> <label class="radio-inline radio-inline2"> <input type="radio" name="optionsRadiosinline" value="04"> 其他 </label> </div> </div> <div class="col-sm-8"> <input id="myFile" type="file" name="myFile" class="fileloading"> </div> <input type="hidden" name="user.logo" id="logo"> </div> </div> </div> <!-- 图片列表 --> <div class="panel panel-info "> <div class="panel-heading panel-heding2"> <h3 class="panel-title">图片列表</h3> </div> <div class="panel-body"> <div class="row" id="picList"> <!--动态加载图片列表 <div class="col-sm-3 col-md-3"> <div class="thumbnail"> <img src="<%=path%>/static/images/text.jpg" alt="通用的占位符缩略图"> <div class="caption" style="padding-top: 0px;padding-bottom: 0px;"> <p class="pic_p">一些示例文本。</p> <p class="pic_p"><a href="#" class="btn btn-primary btn-xs" role="button"> 按钮</a> <button type="button" class="btn btn-info btn-xs"> <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> 删除 </button> </p> </div> </div> </div> --> </div> </div> </div> </div> <!-- ----------------图片上传 end-----------------> </div> </div> <script type="text/javascript" src="<%=path%>/static/js/jquery-1.7.2.js"></script> <script type="text/javascript" src="<%=path%>/static/js/jquery.min.js"></script> <script type="text/javascript" src="<%=path%>/static/ace/js/bootstrap.js"></script> <script type="text/javascript" src="<%=path%>/static/js/laypage/laypage.js"></script> <script type="text/javascript" src="<%=path%>/static/js/layer/laytpl.js"></script> <script type="text/javascript" src="<%=path%>/static/js/layer/layer.js"></script> <script type="text/javascript" src="<%=path%>/static/js/pns-ui.min.js"></script> <script type="text/javascript" src="<%=path%>/static/js/pns.js"></script> <script src="<%=path%>/static/bootstrap-3.3.7/js/bootstrapValidator.js"></script> <script type="text/javascript" src="<%=path%>/static/fileinput/js/fileinput.min.js"></script> <script type="text/javascript" src="<%=path%>/static/fileinput/js/locales/zh.js"></script> <script id="demo1" type="text/html"> {{# for(var i = 0, len = d.list.length; i < len; i++){ }} {{# var l = d.list[i]}} <tr class="text-c" > <td><input type="checkbox" value="{{ l.bar_code}}" name="bar_code"></td> <td><a href="javascript:void(0)" onclick="showUpload('{{l.bar_code}}','{{l.pro_name}}');">{{l.bar_code==undefined?"":l.bar_code}}</a></td> <td>{{l.type==undefined?"":(l.type=="01"?"农产品":(l.type=="02"?"加工食品":(l.type=="03"?"药品":"")))}}</td> <td>{{l.pro_name==undefined?"":l.pro_name}}</td> <td>{{l.org_no==undefined?"":l.org_no}}</td> <td>{{l.pro_describe==undefined?"":l.pro_describe}}</td> <td>下载</td> <td>{{l.brand==undefined?"":l.brand}}</td> <td>{{l.area==undefined?"":l.area}}</td> <td>{{l.origin==undefined?"":l.origin}}</td> <td>{{l.keep==undefined?"":l.keep}}</td> <td>{{l.specifications==undefined?"":l.specifications}}</td> <td>{{l.taboo==undefined?"":l.taboo}}</td> <td>{{l.order_phone==undefined?"":l.order_phone}}</td> <td>{{l.buy_online==undefined?"":l.buy_online}}</td> <td>{{l.count==undefined?"":l.count}}</td> </tr> {{# } }} </script> <script type="text/javascript"> $(function(){ $("#orgdiv").removeClass("upload_panel"); //刷新列表 initPage("listForm","demo1", "view1", "page1"); }); //查询 $("#search").click(function(){ initPage("listForm","demo1", "view1", "page1"); }); //新增 $("#insert").click(function(){ $("#orgdiv").removeClass("upload_panel"); $("#winlist").hide(); $("#winadd").show(); $("#bar_code1").val(""); $("#pro_name1").val(""); $("#type1").val(""); $("#pro_describe1").val(""); $("#org_no1").val(""); $("#brand1").val(""); $("#area1").val(""); $("#origin1").val(""); $("#keep1").val(""); $("#specifications1").val(""); $("#taboo1").val(""); $("#order_phone1").val(""); $("#buy_online1").val(""); $("#id").val(-1); $("#bar_code1").attr('disabled', false); check(); }); //取消 $("#cancel").click(function(){ $("#orgdiv").removeClass("upload_panel"); $("#winlist").show(); $("#winadd").hide(); $("#bar_code1").val(""); $("#pro_name1").val(""); $("#type1").val(""); $("#pro_describe1").val(""); $("#org_no1").val(""); $("#brand1").val(""); $("#area1").val(""); $("#origin1").val(""); $("#keep1").val(""); $("#specifications1").val(""); $("#taboo1").val(""); $("#order_phone1").val(""); $("#buy_online1").val(""); $("#id").val(-1); $("#bar_code1").attr('disabled', false); }); //修改 $("#update").click(function(){ var ids=$("#view1 input[type='checkbox']:checked").map(function(){ return ($(this).attr("value")); }).get().join(",") ; if(ids == ''){ layer.msg("请选择需要修改的信息"); return; } if(ids.indexOf(",")>-1){ layer.msg("只能选择一条记录"); return; } $("#winlist").hide(); $("#winadd").show(); $("#id").val(ids); $.ajax({ url: "<%=path%>/proinfo/re/"+ids, method : "get" , data: {}, dataType: "json", success: function(result){ $("#bar_code1").val(result.proinfo[0].bar_code); $("#type1").val(result.proinfo[0].type); $("#pro_name1").val(result.proinfo[0].pro_name); $("#org_no1").val(result.proinfo[0].org_no); $("#pro_describe1").val(result.proinfo[0].pro_describe); $("#brand1").val(result.proinfo[0].brand); $("#area1").val(result.proinfo[0].area); $("#origin1").val(result.proinfo[0].origin); $("#keep1").val(result.proinfo[0].keep); $("#specifications1").val(result.proinfo[0].specifications); $("#taboo1").val(result.proinfo[0].taboo); $("#order_phone1").val(result.proinfo[0].order_phone); $("#buy_online1").val(result.proinfo[0].buy_online); $("#bar_code1").attr('disabled', true); } }); }); //保存 function save(){ var bar_code = $("#bar_code1").val(); var type = $("#type1").val(); var pro_name = $("#pro_name1").val(); var org_no = $("#org_no1").val(); var pro_describe = $("#pro_describe1").val(); var brand = $("#brand1").val(); var area = $("#area1").val(); var origin = $("#origin1").val(); var keep = $("#keep1").val(); var specifications = $("#specifications1").val(); var taboo = $("#taboo1").val(); var order_phone = $("#order_phone1").val(); var buy_online = $("#buy_online1").val(); var id = $("#id").val(); $.ajax({ url: "<%=path%>/proinfo/re/1", method : "post" , data : {idd:id,bar_code:bar_code,type:type,pro_name:pro_name, org_no:org_no,pro_describe:pro_describe, brand:brand,area:area,origin:origin,keep:keep,specifications:specifications, taboo:taboo,order_phone:order_phone,buy_online:buy_online}, dataType : "json", success : function(data){ if(data.status=="1"){ layer.msg(data.msg, {icon: 6}); } initPage("listForm","demo1", "view1", "page1"); $("#winlist").show(); $("#winadd").hide(); } }) } //删除 $("#del").click(function(){ var ids=$("#view1 input[type='checkbox']:checked").map(function(){ return ($(this).attr("value")); }).get().join(",") ; if(ids == ''){ layer.msg("请选择需要删除的信息"); return; } layer.confirm('确定删除?', function(){ layer.closeAll('dialog'); $.ajax({ url: "<%=path%>/proinfo/re/"+ids, method : "delete" , data: {}, dataType: "json", success: function(result){ layer.msg(result.msg, {icon: 6}); initPage("listForm","demo1", "view1", "page1"); } }); }); }); //图片上传function showUpload(bar_code,pro_name){ $("#orgdiv").addClass("upload_panel"); $("#winlist").hide(); $("#winadd").hide(); $("#winpic").show(); $("#barcode2").html(bar_code); $("#proname2").html(pro_name); //getPicList(org_no); //图片查询列表 $("#myFile").fileinput({ language : 'zh', uploadUrl : "<%=path%>/org/uplode/photo", autoReplace : true, maxFileCount : 1, allowedFileExtensions : [ "jpg", "png", "gif" ], browseClass : "btn btn-primary", //按钮样式 previewFileIcon : "<i class='glyphicon glyphicon-king'></i>" , uploadExtraData:function (previewId, index) { var type = $("input[name='optionsRadiosinline']:checked").val(); var data = { bar_code : bar_code, type:type}; return data; } }).on("fileuploaded", function(e, data) { var res = data.response; layer.msg(res.success); $("#logo").attr("value", res.success); // getPicList(org_no); //图片查询列表 }) } //验证form function check(){ $('#addForm').bootstrapValidator({ //message: 'This value is not valid', feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { bar_code1: { message: '条形码验证失败！', validators: {notEmpty: {message: '条形码不能为空！'}, stringLength: { min:13 , max: 13, message: '条形码长度必须为13位！'}, regexp: { regexp: /^[0-9]+$/, message: '条形码只能包含数字！' } } }, type1: { validators: { notEmpty: { message: '类型不能为空！' }, callback: {message: '必须选择一个类型！', callback: function(value, validator) { if (value == 0) { return false; } else { return true; } } } } }, pro_name1: { validators: { notEmpty: { message: '名称不能为空！' } } } } }).on('success.form.bv', function(e) {//点击提交之后 e.preventDefault(); //防止多次提交form save(); }); } //生产企业弹窗function orgView(){ layer.open({ type: 2, skin: 'layui-layer-molv', //样式类名 closeBtn: 1, //不显示关闭按钮 anim: 2, title: '生产厂家列表', area: ['700px', '510px'], shadeClose: true, //开启遮罩关闭 content: "<%=path%>/proinfo/orgView" }); } //获取图片列表function getPicList(org_no){ $.ajax({ url: "<%=path%>/org/orgPic/"+org_no, method : "get" , data: {}, dataType: "json", success: function(result){ var html = ""; if(result.orgPic.length>0){ for(var i=0;i<result.orgPic.length;i++){ html += '<div class="col-sm-3 col-md-3">'+ '<div class="thumbnail">' + '<img src="<%=path%>/static/'+ result.orgPic[i].url +'" alt="通用的占位符缩略图">'+ '<div class="caption" style="padding-top: 0px;padding-bottom: 0px;">'+ '<p class="pic_p">'+ result.orgPic[i].type +'</p>'+ '<p class="pic_p">'+ '<button type="button" class="btn btn-info btn-xs" onclick="delOrgPic('+ result.orgPic[i].id +')"> '+ '<span class="glyphicon glyphicon-trash" aria-hidden="true"></span> 删除'+ '</button></p></div></div></div> ' } }else{ html = "暂无，请上传！"; } $("#picList").html(html); } }); }//删除图片function delOrgPic(id){ layer.confirm('确定删除?', function(){ layer.closeAll('dialog'); $.ajax({ url: "<%=path%>/org/orgPic/"+id, method : "delete" , data: {}, dataType: "json", success: function(result){ layer.msg(result.msg); getPicList(ttorg_no); } }); }); }</script> </body> </html> 2.orglist.jsp<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE html> <html lang="en"> <head> <title>Org</title> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="<%=path%>/static/ace/css/bootstrap.css" /> <link href="<%=path%>/static/css/pns-ui.min.css" rel="stylesheet"> <link href="<%=path%>/static/css/pns-ui-append.min.css" rel="stylesheet"> <link href="<%=path%>/static/js/laypage/skin/laypage.css" rel="stylesheet"> <link rel="stylesheet" href="<%=path%>/static/fileinput/css/fileinput.min.css" /> <style type="text/css"> .panel{ border-Radius:0px; } .panel-info{ margin-bottom: 0px; } .panel-heding2{ padding-top: 4px; padding-bottom: 4px; } .pic_p{ text-align: center; padding-top: 1px; margin-bottom: 1px; } .upload_panel{ padding:0px; } .mydiv{ padding-top: 40px; font-size: 14px; } .radio-inline2{ margin-left: 54px; } .rr{text-align: right;padding-right: 0px;} .thumbnail img{ height:150px;}</style> </head> <body> <div class="panel panel-primary" > <div class="panel-body" id="orgdiv"> <!-- ----------------查询from -----------------> <div id="winlist"> <form class="form-horizontal" action="<%=path%>/org/listPage" role="form" method="post" id="listForm"> <input type="hidden" name="page" value="1" /> <div class="form-group"> <label for="firstname" class="col-sm-2 control-label">生产公司编码</label> <div class="col-sm-2"><input type="text" class="form-control" name="org_no" id="org_no"></div> <label for="firstname" class="col-sm-2 control-label">生产公司名称</label> <div class="col-sm-2"><input type="text" class="form-control" name="org_name" id="org_name"></div> </div> <div class="form-group"> <div class="col-sm-8"></div> <div class="col-sm-1"> <button type="button" class="btn btn-primary btn-sm" id="search"> <span class="glyphicon glyphicon-search" aria-hidden="true"></span> 查询</button> </div> <div class="col-sm-1"> <button type="button" class="btn btn-primary btn-sm" id="insert"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 新建</button> </div> <div class="col-sm-1"> <button type="button" class="btn btn-primary btn-sm" id="update"> <span class="glyphicon glyphicon-edit" aria-hidden="true"></span> 修改</button> </div> <div class="col-sm-1"> <button type="button" class="btn btn-primary btn-sm" id="del"> <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> 删除</button> </div> </div> </form> <!-- 数据列表 --> <table class="table" id="table"> <thead> <tr> <th></th> <th>生产公司编号 </th> <th>生产公司名称</th> <th>联系人</th> <th>地址</th> <th>描述</th> </tr> </thead> <tbody id="view1"> </tbody> </table> <!-- 页码区 --> <div class="sui-row-fluid"> <div class="span3"></div> <div class="span6"> <div id="page1" class="tables_paginate sui-text-center"> <div name="laypage1.2" class="laypage_main laypageskin_default" id="laypage_0"></div> </div> </div> <div class="span3"></div> </div> </div> <!-- ----------------add -----------------> <div id="winadd" style="display: none"> <form class="form-horizontal" action="" role="form" method="get" id="addForm"> <input type="hidden" id="id" value=""/> <div class="form-group"></div> <div class="form-group"> <label for="firstname" class="col-sm-2 control-label">*生产公司编码</label> <div class="col-sm-3"><input type="text" class="form-control" id="org_no1"></div> <label for="firstname" class="col-sm-2 control-label">*生产公司名称</label> <div class="col-sm-3"><input type="text" class="form-control" id="org_name1"></div> </div> <div class="form-group"> <label class="col-sm-2 control-label">联系人</label> <div class="col-sm-3"><input type="text" class="form-control" id="person1"></div> <label class="col-sm-2 control-label">电话</label> <div class="col-sm-3"><input type="text" class="form-control" id="telephone1"></div> </div> <div class="form-group"> <label class="col-sm-2 control-label">地址</label> <div class="col-sm-8"><input type="text" class="form-control" id="address1"></div> </div> <div class="form-group"> <label class="col-sm-2 control-label">描述</label> <div class="col-sm-8"><input type="text" class="form-control" id="org_describe1"></div> </div> <div class="form-group"> <label class="col-sm-5 control-label"></label> <div class="col-sm-1"> <button type="button" class="btn btn-primary btn-sm" id="save"> <span class="glyphicon glyphicon-saved" aria-hidden="true"></span> 保存</button> </div> <div class="col-sm-1"> <button type="button" class="btn btn-primary btn-sm" id="cancel"> <span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span> 取消</button> </div> <label class="col-sm-5 control-label"></label> </div> </form> </div> <!-- ----------------图片上传 start-----------------> <div id="winpic" style="display: none"> <!-- 上传面板 --> <div class="panel panel-info "> <div class="panel-heading panel-heding2"> <h3 class="panel-title">图片上传</h3> </div> <div class="panel-body"> <div class="form-group"> <div class="col-sm-4 mydiv"> <div class="row"> <label class="col-sm-4 control-label rr">公司编号：</label> <div class="col-sm-8"><p id="orgno2"></p></div> </div> <div class="row"> <label class="col-sm-4 control-label rr">公司名称：</label> <div class="col-sm-8"><p id="orgname2"></p></div> </div> <div class="row"> <label class="col-sm-4 control-label"></label> <div class="col-sm-8"><p></p></div> </div> <div class="row"> <label class="radio-inline radio-inline2"> <input type="radio" name="optionsRadiosinline" id="type1" value="01" checked="checked"> 公司资质 </label> <label class="radio-inline"> <input type="radio" name="optionsRadiosinline" id="type2" value="02"> 经营活动 </label> </div> <div class="row"> <label class="radio-inline radio-inline2"> <input type="radio" name="optionsRadiosinline" id="type3" value="03"> 工厂取景 </label> <label class="radio-inline radio-inline2"> <input type="radio" name="optionsRadiosinline" id="type4" value="04"> 其他 </label> </div> </div> <div class="col-sm-8"> <input id="myFile" type="file" name="myFile" class="fileloading"> </div> <input type="hidden" name="user.logo" id="logo"> </div> </div> </div> <!-- 图片列表 --> <div class="panel panel-info "> <div class="panel-heading panel-heding2"> <h3 class="panel-title">图片列表</h3> </div> <div class="panel-body"> <div class="row" id="picList"> <!--动态加载图片列表 <div class="col-sm-3 col-md-3"> <div class="thumbnail"> <img src="<%=path%>/static/images/text.jpg" alt="通用的占位符缩略图"> <div class="caption" style="padding-top: 0px;padding-bottom: 0px;"> <p class="pic_p">一些示例文本。</p> <p class="pic_p"><a href="#" class="btn btn-primary btn-xs" role="button"> 按钮</a> <button type="button" class="btn btn-info btn-xs"> <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> 删除 </button> </p> </div> </div> </div> --> </div> </div> </div> </div> <!-- ----------------图片上传 end-----------------> </div> </div> <script type="text/javascript" src="<%=path%>/static/js/jquery-1.7.2.js"></script> <script type="text/javascript" src="<%=path%>/static/js/jquery.min.js"></script> <script type="text/javascript" src="<%=path%>/static/ace/js/bootstrap.js"></script> <script type="text/javascript" src="<%=path%>/static/js/laypage/laypage.js"></script> <script type="text/javascript" src="<%=path%>/static/js/layer/laytpl.js"></script> <script type="text/javascript" src="<%=path%>/static/js/layer/layer.js"></script> <script type="text/javascript" src="<%=path%>/static/js/pns-ui.min.js"></script> <script type="text/javascript" src="<%=path%>/static/js/pns.js"></script> <script type="text/javascript" src="<%=path%>/static/fileinput/js/fileinput.min.js"></script> <script type="text/javascript" src="<%=path%>/static/fileinput/js/locales/zh.js"></script> <script id="demo1" type="text/html"> {{# for(var i = 0, len = d.list.length; i < len; i++){ }} {{# var l = d.list[i]}} <tr class="text-c" > <td><input type="checkbox" value="{{ l.id}}" name="id"></td> <td><a href="javascript:void(0)" onclick="showUpload('{{l.org_no}}','{{l.org_name}}');">{{l.org_no==undefined?"":l.org_no}}</a></td> <td>{{l.org_name==undefined?"":l.org_name}}</td> <td>{{l.person==undefined?"":l.person}}</td> <td>{{l.address==undefined?"":l.address}}</td> <td>{{l.org_describe==undefined?"":l.org_describe}}</td> </tr> {{# } }} </script> <script type="text/javascript"> var ttorg_no = "";$(function(){ $("#orgdiv").removeClass("upload_panel"); //刷新列表 initPage("listForm","demo1", "view1", "page1"); }); //查询 $("#search").click(function(){ initPage("listForm","demo1", "view1", "page1"); }); //新增 $("#insert").click(function(){ $("#orgdiv").removeClass("upload_panel"); $("#winlist").hide(); $("#winadd").show(); $("#org_no1").val(""); $("#org_name1").val(""); $("#person1").val(""); $("#telephone1").val(""); $("#address1").val(""); $("#org_describe1").val(""); $("#id").val(-1); $("#org_no1").attr('disabled', false); }); //取消 $("#cancel").click(function(){ $("#orgdiv").removeClass("upload_panel"); $("#winlist").show(); $("#winadd").hide(); $("#org_no1").val(""); $("#org_name1").val(""); $("#person1").val(""); $("#telephone1").val(""); $("#address1").val(""); $("#org_describe1").val(""); $("#id").val(-1); $("#org_no1").attr('disabled', false); }); //修改 $("#update").click(function(){ var ids=$("#view1 input[type='checkbox']:checked").map(function(){ return ($(this).attr("value")); }).get().join(",") ; if(ids == ''){ layer.msg("请选择需要修改的信息"); return; } if(ids.indexOf(",")>-1){ layer.msg("只能选择一条记录"); return; } $("#winlist").hide(); $("#winadd").show(); $("#id").val(ids); $.ajax({ url: "<%=path%>/org/re/"+ids, method : "get" , data: {}, dataType: "json", success: function(result){ $("#org_no1").val(result.org[0].org_no); $("#org_name1").val(result.org[0].org_name); $("#person1").val(result.org[0].person); $("#telephone1").val(result.org[0].telephone); $("#address1").val(result.org[0].address); $("#org_describe1").val(result.org[0].org_describel); $("#org_no1").attr('disabled', true); } }); }); //保存 $("#save").click(function(){ var org_no = $("#org_no1").val(); var org_name = $("#org_name1").val(); var person = $("#person1").val(); var telephone = $("#telephone1").val(); var address = $("#address1").val(); var org_describe = $("#org_describe1").val(); var id = $("#id").val(); if(org_no==""||org_name==""){ layer.msg("必填项不能为空！"); return; } $.ajax({ url: "<%=path%>/org/re/1", method : "post" , data : {id:id,org_no:org_no,org_name:org_name,person:person, telephone:telephone,address:address,org_describe:org_describe}, dataType : "json", success : function(data){ if(data.status=="1"){ layer.msg(data.msg); } initPage("listForm","demo1", "view1", "page1"); $("#winlist").show(); $("#winadd").hide(); } }) }); //删除 $("#del").click(function(){ var ids=$("#view1 input[type='checkbox']:checked").map(function(){ return ($(this).attr("value")); }).get().join(",") ; if(ids == ''){ layer.msg("请选择需要删除的信息"); return; } layer.confirm('确定删除?', function(){ layer.closeAll('dialog'); $.ajax({ url: "<%=path%>/org/re/"+ids, method : "delete" , data: {}, dataType: "json", success: function(result){ layer.msg(result.msg); initPage("listForm","demo1", "view1", "page1"); } }); }); }); //图片上传 function showUpload(org_no,org_name){ ttorg_no = org_no; $("#winlist").hide(); $("#winadd").hide(); $("#winpic").show(); $("#orgdiv").addClass("upload_panel"); $("#orgno2").html(org_no); $("#orgname2").html(org_name); getPicList(org_no); $("#myFile").fileinput({ language : 'zh', uploadUrl : "<%=path%>/org/uplode/photo", autoReplace : true, maxFileCount : 1, allowedFileExtensions : [ "jpg", "png", "gif" ], browseClass : "btn btn-primary", //按钮样式 previewFileIcon : "<i class='glyphicon glyphicon-king'></i>" , uploadExtraData:function (previewId, index) { var type = $("input[name='optionsRadiosinline']:checked").val(); var data = { org_no : org_no,type:type}; return data; } }).on("fileuploaded", function(e, data) { var res = data.response; layer.msg(res.success); $("#logo").attr("value", res.success); getPicList(org_no); }) } //获取图片列表function getPicList(org_no){ $.ajax({ url: "<%=path%>/org/orgPic/"+org_no, method : "get" , data: {}, dataType: "json", success: function(result){ var html = ""; if(result.orgPic.length>0){ for(var i=0;i<result.orgPic.length;i++){ html += '<div class="col-sm-3 col-md-3">'+ '<div class="thumbnail">' + '<img src="<%=path%>/static/'+ result.orgPic[i].url +'" alt="通用的占位符缩略图">'+ '<div class="caption" style="padding-top: 0px;padding-bottom: 0px;">'+ '<p class="pic_p">'+ result.orgPic[i].type +'</p>'+ '<p class="pic_p">'+ '<button type="button" class="btn btn-info btn-xs" onclick="delOrgPic('+ result.orgPic[i].id +')"> '+ '<span class="glyphicon glyphicon-trash" aria-hidden="true"></span> 删除'+ '</button></p></div></div></div> ' } }else{ html = "暂无，请上传！"; } $("#picList").html(html); } }); }//删除图片function delOrgPic(id){ layer.confirm('确定删除?', function(){ layer.closeAll('dialog'); $.ajax({ url: "<%=path%>/org/orgPic/"+id, method : "delete" , data: {}, dataType: "json", success: function(result){ layer.msg(result.msg); getPicList(ttorg_no); } }); }); }</script> </body> </html> 阅读全文
