目标：layui 实现点击按钮添加一行
解决方案：
方案1、table 是用转换静态表格的方式创建的，写一个button，每次点击按钮，就添加一个<tr> 标签；
方案2、table 是用方法渲染的方式创建的，写一个button,每次点击按钮，加载数据时添加一个Object;
之前我试过用方案1 来实现该功能，发现这个方案，代码量极大，最困难的地方就是在<tr>中加样式，特别是table中有很多种控件时，样式的添加非常麻烦 ，可参见点击打开链接
后选择使用方案2 ，但是遇到了，添加的对象无法通过加载url来渲染t
原来的数据表格使用方法渲染的方法传的值，其数据是从url中取出，

发现layui的url传值方式，数据格式必须为：
{"code":0,"msg":"","count":4,"data":[{"colName":"ID","colNo":0,"collator":"","comments":"","dbId":1,"defVal":"","deleted":"","dispersion":0,"domainId":0,"histogram":"","isHide":"","isSerial":"F","isVirtual":"","maxVal":"","minVal":"","notNull":"T","repetRate":0,"scale":-1,"serialId":0,"tableId":1048586,"timestampT":"
 ","typeName":"INTEGER","varying":"F","vcolNo":0,"vertNo":0}]}



而我在reload方法中存放的data数据格式为
[{"colName":"ID1","colNo":0,"collator":"","comments":"","dbId":1,"defVal":"","deleted":"","dispersion":0,"domainId":0,"histogram":"","isHide":"","isSerial":"F","isVirtual":"","maxVal":"","minVal":"","notNull":"T","repetRate":0,"scale":-1,"serialId":0,"tableId":1048586,"timestampT":"
 ","typeName":"INTEGER","varying":"F","vcolNo":0,"vertNo":0}]






因此，解决方案：


1、将新增的data格式修改为url返回的格式，失败；


2、将url的返回值，以data的array格式返回，并作为变量传给data;成功。



全部方法如下：
首先：用ajax请求将数据取出存于变量，将变量赋值给table的data

var tableData=new Array(); // 用于存放表格数据
$.ajax({
          url: "${ctp}/TableOperate/GetColsInfo?tabId=1048586&dbId=1"
          ,type:"get"
          ,async:false
          ,dataType:"json"
          , success: function(result){
              tableData=result;
          console.log(result);
          }
     });
table.render({
         elem: '#baseInfo'
          ,data:tableData
          ,cols: [[
          {title : '序号',type:'numbers',Width: 20}
            /*  ,{field:'tableId'  , title:'tableId' }
             ,{field:'dbId'     , title:'dbId'    } */
             ,{field:'colNo'    , title:'colNo'   , sort: true}
             ,{field:'domainId' , title:'domainId', minWidth: 120, templet: '#switchTpl', unresize: true }
             ,{field:'colName'  , title:'colName' , minWidth: 120, sort: true           , edit: 'text'}
             ,{field:'typeName' , title:'typeName', minWidth: 120, sort: true   ,templet: '#selectTpl'}
             ,{field:'scale'    , title:'scale'   , minWidth: 80,  edit: 'text'}
             ,{field:'notNull'  , title:'notNull' , minWidth: 100, templet: '#switchNullTpl', unresize: true}
               ]]
          ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
           layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
           ,curr: 1 //设定初始在第 1 页
           ,groups: 1 //只显示 1 个连续页码
           ,first: false //不显示首页
           ,last: false //不显示尾页
         }
          , done: function(res, curr, count){
               }

       });





最后，调用按钮的点击方法
//点击加号按钮时，新添一行
     $("#addTable").click(function(){
          var oldData =  table.cache["baseInfo"];
          var data1={"colName":"ID2","colNo":0,"collator":"","comments":"","dbId":1,"defVal":"","deleted":"","dispersion":0,"domainId":0,"histogram":"","isHide":"","isSerial":"F","isVirtual":"","maxVal":"","minVal":"","notNull":"T","repetRate":0,"scale":-1,"serialId":0,"tableId":1048586,"timestampT":" ","typeName":"INTEGER","varying":"F","vcolNo":0,"vertNo":0};
          oldData.push(data1);
          table.reload('baseInfo',{
              data : oldData
          });
     });

效果如图所示：

layui 上传控件非自动上传只能实现一个或的多个图片同时在一个上传控件中实现，并传回到controller处理上传结果

若需要多个上传控件上传图片，提交时再分别获取图片信息如何处理呢？

---经过测试可以采用ajax提交的方式实现

具体实现过程如下：

    <div class="layui-form-item">
            <label class="layui-form-label">按钮图标:</label>
            <div class="layui-upload">
                <button type="button" class="layui-btn" id="uploadImageBtn">上传图片</button>
                <div id="uploadList" class="layui-upload-list">
                </div>
            </div>
        </div>

使用uploadTimes标识，防止重复上传时不触发。

  renderObj = upload.render({
        elem: '#uploadImageBtn'
        , url: 'url' //设置url
        , auto: false
        // , bindAction: '#commit'
        , field: 'image'
        , choose: function (obj) {
            uploadTimes += 1; 
             obj.preview(function (index, file, result) {
                 $('#uploadList').find('img').remove();
                 $('#uploadList').append('<img class="layui-upload-img" id="uploadImage" src="' + result + '">');
             });
            
        }
        , done: function (res, index, upload) {
            //处理上传结果
        }
    });


采用ajax方式传结果至后台处理。若有其他字段需要同时传值到后台处理，可以1、通过在form中添加name方式，利用data.field自动获取值；2、使用formData.append(name,val)方式主动添加值。

form.on('submit(demo1)', function (data) {
        var params = data.field;
        if (params.image === null || !params) {
            layer.msg("请上传图片", {icon: 2});
            return false;
        }
        var formData = new FormData();
        formData.append("data", JSON.stringify(params));
        $.ajax({
            type: 'POST',
            url: '//', //请求路径
            data: formData,
            dataType: "json",
            contentType: false,
            processData: false, 
            success: function (data) {
              //处理结果

            }
        });
        return false;
    });

java后台controller数据接收方式：

public Result uploadDataTest(HttpServletRequest request, HttpSession session, HttpServletResponse response) {
    try {
        String imagePath = "";
        CommonsMultipartResolver resolver = new CommonsMultipartResolver(request.getServletContext());
        if (resolver.isMultipart(request)) {
            MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
            List<MultipartFile> images = multiRequest.getFiles("image"); //取上传文件
            // String name = multiRequest.getParameterValues("name"); --取其他参数
        }
       
        return Result.fail(-1, null, "error");
    } catch (Exception ex) {
        return Result.fail(-1, null, "test fatal");
    }
}

over. 

 

在开发中有时候  table 表格的操作按钮是不固定的，可以有多个，三两个还好，如果操作的按钮过多的时候就不美观了，这时候我们就想把一下按钮添加到一个按钮列表中，在正常的情况下就隐藏起来，点击的时候弹出这个按钮列表， 如： 我们想要实现这种效果


当我们点击更多的时候弹出一个按钮列表， 在网上找了好久都没有找到layui有中自带这个功能，所有得自己写了
思路
刚开始的时候我觉得可以点击更多的时候写一个弹窗的方法，在弹窗中展示按钮，但是做的差不多的时候发现，这弹窗不太行，不符合原型图上的设计，于是又找其他的方法，最终找到了 layer.tips方法

layer.tips是提示方法，它可以在点击的地方进行弹窗提示，跟原型图上的差不多了， 于是将普通弹窗改为了 layer.tips
    //监听工具条
    table.on('tool(data_table)', function(obj){
    	//当点击table 表格中的更多按钮的时候触发这个事件
        if(obj.event === 'more'){
			var html = "<input value = 'aaaa'>"
 			layer.tips(html, this,{tips: [1, '#ffffff'],area: ['130px', '150px'], time: 0})
 	} 
 }

用layer.tips又有个问题，这是提示弹窗，一般提示的弹窗会有个在 几秒后 自动关闭 或者设置为不关闭，这样不太符合我们的要求，我们想要自己关闭这个弹窗,由于这个弹窗右上角是没有关闭图标的，所以我们想设置成点击其他地方就自动关闭这个弹窗，这时候可以写一个监听鼠标点击事件进行监听
    //监听工具条
    table.on('tool(data_table)', function(obj){
    	//当点击table 表格中的更多按钮的时候触发这个事件
        if(obj.event === 'more'){
			var html = "<input value = 'aaaa'>"
			// 获取弹窗index
 			tips_index = layer.tips(html, this,{tips: [1, '#ffffff'],area: ['130px', '150px'], time: 0})
 	} 
 }
 	//定义tips 弹窗index
 	var tips_index = ""
 	//监听鼠标点击事件
   window.addEventListener('click', function() {
   		//关闭弹窗
        layer.close(tips_index)
    }, false);

当监听到鼠标点击的时候关闭layer.tips弹窗

这时候又有个问题了，这个监听鼠标点击事件在 js 事件等级是最低的，就是说，我点击更多后展示弹窗，展示完弹窗后再执行其他的关联到这个点击事件的其他操作，执行完所有更这个点击事件相关的逻辑才到鼠标监听事件，这就出现了一种情况， 我点完更多，刚弹窗又被鼠标监听给关闭了，这就很麻烦了，问题在鼠标监听上，我可以再弄一个变量用来逻辑判断啊， 上面 tips.index是弹窗的索引， 也就是说它是一个整数，我点击更多的时候它会将这个索引赋值给全局变量 tips_index,这时候我再赋值一个控制关闭弹窗的变量一个小于这个索引值的数，然后改一下监听事件，每次监听点击就给这个控制关闭弹窗的变量+1， 如果相等就不关闭，如果不相等就关闭这个弹窗不就行了吗
    //监听工具条
    table.on('tool(data_table)', function(obj){
    	//当点击table 表格中的更多按钮的时候触发这个事件
        if(obj.event === 'more'){
			var html = "<input value = 'aaaa'>"
			// 获取弹窗index
 			tips_index = layer.tips(html, this,{tips: [1, '#ffffff'],area: ['130px', '150px'], time: 0})
 			close_tips = tips_index-1
 	} 
 }
 	//定义tips 弹窗index
 	var tips_index = ""
 	var close_tips = ""
 	//监听鼠标点击事件
   window.addEventListener('click', function() {
   		//关闭弹窗
   		close_tips += 1
   		if (close_tips != tips_index){
   		        layer.close(tips_index)
   		}
    }, false);

终于完了，看下效果

听起来比前一篇简单，其实不然啊！因为不懂js的语法踩了好多的坑呢！

先来看效果吧：下面的表格内容和这次删除无关，那是别的按钮的查询展示效果，只是公用了一个页面而已



废话不多说，先上前端的主要代码:

 <div class="layui-row">
				<form class="layui-form layui-col-md12 we-search" id="form_gen_data">
					<div class="layui-inline">
                        <label class="layui-form-label">手机号</label>
						<input class="layui-input" placeholder="手机号" name="phone" id="phone">
					</div>

                    <div class="layui-inline">
                        <label class="layui-form-label">身份证</label>
						<input class="layui-input" placeholder="身份证" name="idno" id="idno">
					</div>

                    <div class="layui-inline">
                        <label class="layui-form-label">姓名</label>
						<input class="layui-input" placeholder="姓名" name="name" id="name">
					</div>

                    <div class="layui-inline">
                        <label class="layui-form-label">crfuid</label>
						<input class="layui-input" placeholder="crfuid" name="crfuid" id="crfuid">
					</div>

				</form>
			</div>

			<div class="weadmin-block">
				<!--<button class="layui-btn" id="query_extra" style="display:none;">扩展功能</button>-->
				<button class="layui-btn" id="query_thumb" onclick="return false;" data-type="reload">查询用户</button>
				<button class="layui-btn" id="query_limit"  onclick="return false;" data-type="reload">额度查询</button>
				<button class="layui-btn" id="query_account">账户查询</button>
				<button class="layui-btn" id="del_looploan" onclick="delAll()">删除循环贷借款</button>

<!--以上是页面的设计和展示，以下是js实现-->

function delAll(){
			layui.use(['layer'],function(){
				var form=layui.form
				,layer=layui.layer
				,$=layui.$;
				layer.confirm('确定删除吗?', {btn: ['确定删除', '取消']}, function (index) {
					layer.close(index);
					$.ajax({
								url: "/tools/del_looploan",
								type: "POST",
								data:{"phone":$('#phone').val(),"crfuid":$('#crfuid').val(),"env_tools":parent.window.env_tools},   //"phone":$('#phone').val()取到input的值传给后台作为删除的条件
								dataType: "json",
								success: function(data){
									if(data['status']=="success"){
										layer.alert("删除成功",{icon:6});
										}
									else{
										layer.alert("删除失败",{icon:5});
									}
								}
						});
					});
		 });
         }





后台Python代码如下：

@toolsbp.route('/del_looploan', methods=['GET', 'POST'])
def del_looploan():
    if request.method =='POST':
        data = {}
        data['data'] = ''
        data['code'] = 0
        data['msg'] = '查询成功'
        data['status']=''
        env = request.form.get('env_tools')
        if env is None:
             return json.dumps(data)  #返回data的内容,将一个Python数据结构转换为JSON

        phone = request.form.get('phone')
        crfuid = request.form.get('crfuid')
        print(phone)
        print(crfuid)

        if phone:
            if crfuid=='':
                dbinfo = env_config.ENV_LIST.get(env.upper()).get('crf_rcs_agent_db')
                dbtool = MysqlPool.MysqlPool(dbinfo.get('db_name'))
                result=dbtool.getAll("select crf_uid from app_db_uat.ct_user where phone= '%(phone)s';"%{'phone':phone})
                print(result)
                print(result[0]['crf_uid'])
                crfuid=result[0]['crf_uid']
        if crfuid:
            if env in ['UAT','UATA']:
                dbinfo = env_config.ENV_LIST.get(env.upper()).get('crf_rcs_agent_db')
                dbtool = MysqlPool.MysqlPool(dbinfo.get('db_name'))
                del_loan01=dbtool.getAll("delete from crf_rcs_agent_db_uat.agt_limit_flow  where crf_uid='%(crfuid)s';"%{'crfuid':crfuid})
                del_loan02 = dbtool.getAll("delete from crf_rcs_agent_db_uat.agt_limit_flow_detail  where crf_uid='%(crfuid)s';" % {'crfuid': crfuid})
                del_loan03 = dbtool.getAll( "delete from crf_rcs_agent_db_uat.agt_loan_agreement  where crf_uid='%(crfuid)s';" % {'crfuid': crfuid})
                del_loan04 = dbtool.getAll("delete from crf_rcs_agent_db_uat.agt_loan_agreement_detail  where crf_uid='%(crfuid)s';" % {'crfuid': crfuid})
                del_loan05 = dbtool.getAll( "delete from crf_rcs_agent_db_uat.agt_loan_app  where crf_uid='%(crfuid)s';" % {'crfuid': crfuid})
                del_loan06 = dbtool.getAll("delete from crf_rcs_agent_db_uat.agt_loan_order  where crf_uid='%(crfuid)s';" % {'crfuid': crfuid})
                del_loan07= dbtool.getAll("delete from crf_rcs_agent_db_uat.agt_loan_price  where crf_uid='%(crfuid)s';" % {'crfuid': crfuid})
                del_loan08 = dbtool.getAll("delete from crf_rcs_agent_db_uat.agt_loan_times  where crf_uid='%(crfuid)s';" % {'crfuid': crfuid})
                del_loan09 = dbtool.getAll("delete from crf_rcs_agent_db_uat.agt_offline_order  where crf_uid='%(crfuid)s';" % {'crfuid': crfuid})
                del_loan10 = dbtool.getAll("delete from crf_rcs_agent_db_uat.agt_pay_flow  where crf_uid='%(crfuid)s';" % {'crfuid': crfuid})
                del_loan11 = dbtool.getAll("delete from crf_rcs_agent_db_uat.agt_repay_flow  where crf_uid='%(crfuid)s';" % {'crfuid': crfuid})
                del_loan12 = dbtool.getAll("delete from crf_rcs_agent_db_uat.agt_repay_flow_detail  where crf_uid='%(crfuid)s';" % {'crfuid': crfuid})
                del_loan13 = dbtool.getAll("delete from crf_rcs_agent_db_uat.agt_repay_order_detail  where crf_uid='%(crfuid)s';" % {'crfuid': crfuid})
                del_loan14 = dbtool.getAll("delete from crf_rcs_agent_db_uat.agt_repay_offset_detail  where crf_uid='%(crfuid)s';" % { 'crfuid': crfuid})
                del_loan15 = dbtool.getAll("delete from crf_rcs_agent_db_uat.agt_repay_order  where crf_uid='%(crfuid)s';" % {'crfuid': crfuid})
                del_loan16 = dbtool.getAll("delete from crf_rcs_agent_db_uat.agt_repay_plan  where crf_uid='%(crfuid)s';" % {'crfuid': crfuid})
                del_loan17 = dbtool.getAll("delete from crf_rcs_agent_db_uat.agt_sms_sendlog  where crf_uid='%(crfuid)s';" % {'crfuid': crfuid})
                del_loan18 = dbtool.getAll("delete from crf_rcs_agent_db_uat.agt_trxn_log  where crf_uid='%(crfuid)s';" % {'crfuid': crfuid})
                del_loan19 = dbtool.getAll("delete from crf_rcs_core_db_uat.act_account  where crf_uid='%(crfuid)s';" % {'crfuid': crfuid})
                del_loan20 = dbtool.getAll("delete from crf_rcs_core_db_uat.act_loan_info  where crf_uid='%(crfuid)s';" % {'crfuid': crfuid})
                del_loan21= dbtool.getAll("delete from crf_rcs_core_db_uat.act_loan_price  where crf_uid='%(crfuid)s';" % {'crfuid': crfuid})
                del_loan22 = dbtool.getAll("delete from crf_rcs_core_db_uat.act_overdue  where crf_uid='%(crfuid)s';" % {'crfuid': crfuid})
                del_loan23 = dbtool.getAll("delete from crf_rcs_core_db_uat.act_overdue_detail  where crf_uid='%(crfuid)s';" % {'crfuid': crfuid})
                del_loan24 = dbtool.getAll("delete from crf_rcs_core_db_uat.act_overdue_loaninfo  where crf_uid='%(crfuid)s';" % {'crfuid': crfuid})
                del_loan25 = dbtool.getAll("delete from crf_rcs_core_db_uat.act_post_pay  where crf_uid='%(crfuid)s';" % {'crfuid': crfuid})
                del_loan26 = dbtool.getAll("delete from crf_rcs_core_db_uat.act_post_repay  where crf_uid='%(crfuid)s';" % {'crfuid': crfuid})
                del_loan27 = dbtool.getAll("delete from crf_rcs_core_db_uat.act_repay_offset  where crf_uid='%(crfuid)s';" % {'crfuid': crfuid})
                del_loan28 = dbtool.getAll("delete from crf_rcs_core_db_uat.act_repay_plan  where crf_uid='%(crfuid)s';" % {'crfuid': crfuid})
                del_loan29 = dbtool.getAll("delete from crf_rcs_core_db_uat.act_blacklist  where crf_uid='%(crfuid)s';" % {'crfuid': crfuid})
                del_loan29 = dbtool.getAll("delete from crf_rcs_core_db_uat.act_repay_fee_record  where crf_uid='%(crfuid)s';" % {'crfuid': crfuid})
                data['status'] = "success"
        else:
            "请输入手机号或者crfuid"
        return json.dumps(data, cls=MysqlPool.DateEncoder)
    return render_template('tools/index.html')

在这个过程中因为把ajax的url写成

url: "/tools/del_looploan/"这样，报找不到页面，正确写法：url: "/tools/del_looploan"