Bootstrap-dialog的使用（續Bootstrap Table）

Bootstrap-dialog實現表格內容的增，刪，改。

插件引入：必須先引入jquery和bootstrap和artTemplate。

<link rel="stylesheet" href="${ctx}/assets/plugins/bootstrap-dialog/css/bootstrap-dialog.min.css">
<script src="${ctx}/assets/plugins/bootstrap-dialog/js/bootstrap-dialog.min.js"></script>
<script src="${ctx}/assets/js/app-jquery-dialog.js"></script>  //自寫的插件，結合ajax。

增：

點擊新增訂單：彈出如圖所示的彈框。

 

$("#addBtn").on("click", function() { $.FORM.showFormDialog({ //顯示需要提交的表單。 title: "添加VIP訂單", //標題 postUrl: "${aapi}/orderVip/create", //數據提交的接口
          templateUrl: '${aapi}/page/custom/vipForm', //form表單所在的jsp頁面，在mysql中手動添加。 formId: "#vipForm", // 需要提交的form表單的id postType: "multipart", // 提交數據類型，與后台@requestBody保持一致。 data: { //自定義上傳的參數 pid: 0, pname: "--", level: 0 },  onPostSuccess: function() { $("#table").bootstrapTable("refresh"); //請求成功刷新表格，加載數據 } }); });

 

 templateUrl里的jsp頁面表單部分。

 注意：后台會給出接口文檔，name與表單提交的字段名保持一致，否則無法上傳。

<form id="vipForm" method="post" action="">
    <input type="hidden" name="id"> 
    <input type="hidden" name="pid" value="{{pid}}">
    <input type="hidden" name="level" value="{{level}}">
    <input type="hidden" name="cusId" id="id" value="" placeholder="id" />
    <input type="hidden" name="cusName" id="cusName" value="" placeholder="選擇大客戶姓名" />
    <div class="form-group ">
        <label for="fixMove">訂單類型：</label> 
        <label class="checkbox-inline">
            <input type="checkbox" name="type" value="1" />搬運
        </label> 
        <label class="checkbox-inline"> 
            <input type="checkbox" name="type" value="0" />維修
        </label>
    </div>
    <div class="form-group ">
        <label>訂單備注：</label>
        <div>
            <textarea name="remark" rows="3" cols="70"></textarea>
        </div>
    </div>
    <div class="form-group ">
        <label for="file">訂單文件</label>
        <div>
            <input type="file" id="file" name="orderFile" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, 
            application/vnd.ms-excel,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" />
        </div>
    </div>
    <div class="form-group" id="searchForm">
        <label for="isHot">訂單用戶：</label>
        <span id="cusname"></span>
        <div>
            <input type="text" class="searEle" name="nickname" value="" placeholder="姓名" />
            <input type="text" class="searEle" name="phone" value="" placeholder="手機號碼" />
            <input id="searchcus" type="button" value="查詢" />
        </div>
        <div>
            <table id="cusTable"></table>
        </div>
    </div>
</form>

添加內容並且上傳，在后台接口中打一個斷點，就能監聽到前端傳入后台的數據（info）。如下圖所示。

成功后信息提示，表格刷新顯示剛才增加的訂單。信息提示本文暫不做闡述，在Pnotify插件使用中詳細闡述。

改：

點擊修改按鈕，彈出表單框。

 js代碼：除了新增了dataSource和isReadOnly，與上述無異。

$.FORM.showFormDialog({ title: "修改VIP訂單", postUrl: "${aapi}/orderVip/update", //更新內容的接口 dataSource: "${aapi}/orderVip/detail/2/" + row.orderNo,//新增了dataSource結合artTemplate用於渲染數據表單數據，實現在此基礎上的修改。 isReadOnly: false, //設置為非只讀模式，進入修改模式，提交按鈕變成修改。 templateUrl: '${aapi}/page/custom/vipModifyForm', //修改的jsp頁面，與新增的頁面不一致，使用artTemplate將datasource的數據渲染到表單中。 formId: "#vipForm", //修改為“vipModifyForm.jsp”頁面的formid postType: "multipart", data: { pid: 0, pname: "--", level: 0 }, onPostSuccess: function() { $("#table").bootstrapTable("refresh"); } });

 templateUrl：

<script>
    if("{{type}}"=="1,0"){ $("#movetype").attr("checked","checked"); $("#fixtype").attr("checked","checked"); }else if("{{type}}"=="0"){ $("#fixtype").attr("checked","checked"); }else if("{{type}}"=="1"){ $("#movetype").attr("checked","checked"); } function clickCk(){ var movetype = $("#movetype").prop("checked"); var fixtype = $("#fixtype").prop("checked"); var typeStr = "1,0"; if(movetype&&!fixtype){ typeStr = "1"; }else if(!movetype&&fixtype){ typeStr = "0"; } $("#typeStr").val(typeStr); } </script>
<form id="vipForm" method="post" action="">
    <input type="hidden" name="id"> //type:hiden,看不見這個form控件，但是值能隨着表單一起提交。
    <input type="hidden" name="pid" value="{{pid}}"> 
    <input type="hidden" name="level" value="{{level}}">
    <input type="hidden" name="orderNo" value="{{orderNo}}" /> //由於是修改這一條訂單的內容，所以必須上傳該條訂單的某個參數用以區分，后台要求傳orderNo。
    <input type="hidden" name="cusId" id="id" value="" placeholder="id" />
    <input type="hidden" name="cusName" id="cusName" value="" placeholder="選擇大客戶姓名" />

    <div class="form-group ">
        <label for="fixMove">訂單類型：</label> 
        <label class="checkbox-inline">
            <input type="checkbox" value="1" id="movetype" onclick="clickCk()"/>搬運
        </label> 
        <label class="checkbox-inline">
            <input type="checkbox" value="0" id="fixtype" onclick="clickCk()"/>維修
        </label>
            <input type="hidden" name="type" readonly id="typeStr"/>
    </div>

    <div class="form-group ">
        <label>訂單備注：</label>
        <div>
            <textarea name="remark" rows="3" cols="70"></textarea>
        </div>
    </div>
    <div class="form-group ">
        <label>訂單文件：</label><span>{{fileRealName}}</span>
        <input name="orderFile" id="input-1" type="file" class="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,
        application/vnd.ms-excel,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">
    </div>
    <div class="form-group" id="searchForm">
        <label for="isHot">訂單用戶：</label>
        <span id="cusname"></span>
        <div>
            <input type="text" class="searEle" name="nickname" value="" placeholder="姓名" />
            <input type="text" class="searEle" name="phone" value="" placeholder="手機號碼" />
            <input id="searchcus" type="button" value="查詢" />
        </div>
        <div>
            <table id="cusTable"></table>
        </div>
    </div>
</form>

 請求成功后，提示成功，並且表格更新為已改的數據。

 

刪：

點擊刪除按鈕。彈出刪除信息。

 js代碼：

$.FORM.showConfirm({ title: "提示", message: "您確認要取消訂單【" + row.orderNo + "】？", //內置文字 url: "${aapi}/orderVip/delete/" + row.orderNo, //刪除的接口 autoClose: true, //自動關閉 successTitle: "成功", successMessage: "訂單【" + row.orderNo + "】已取消！", onSuccess: function() { $("#table").bootstrapTable("refresh"); } });

  刪除成功后消息提示，並且從表格中被刪除。

 

詳情：

點擊訂單編號，彈出訂單詳情。

js代碼：

$.FORM.showFormDialog({ title: "訂單詳情", isReadOnly: true, //設置為true就沒有保存的按鈕了。 dataSource: "${aapi}/orderVip/detail/2/" + row.orderNo, templateUrl: '${aapi}/page/custom/vipOrderDetail' });

 

artTemplate渲染模版：

<div id="messageForm">
    <input type="hidden" name="id">
    <div class="form-group ">
        <label>訂單編號</label> 
        <p>{{orderNo}}</p> 
    </div>
    <div class="form-group ">
        <label>拆分數目</label>
        <p>{{if type=='0'}} 維修 {{else if type=='1'}}搬運{{else if type=="1,0"}}搬運、維修{{/if}}</p>
    </div>
    <div class="form-group ">
        <label>發起人</label>
        <p>{{cusName}}</p>
    </div>
    <div class="form-group ">
        <label>備注</label>
        <p>{{remark}}</p>
    </div>
    <div class="form-group ">
        <label>創建時間</label>
        <p>{{createdDtm}}</p>
    </div>
    <div class="form-group ">
        <label>文檔下載</label>
        <p id="download" style="cursor: pointer;"><i class="fa fa-file-o" aria-hidden="true"></i>{{fileRealName}}</p>
    </div>
</div>

 <script>
   $("#download").on("click",function(){
     location.href='${aapi}/orderVip/downLoad/{{orderNo}}';//下載文件的接口
   });
 </script>