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>

 

Bootstrap-dialog的使用(续Bootstrap Table)的更多相关文章

  1. bootstrap dialog自行控制窗口的关闭

    在使用dialog的时候,我们通常不希望点击btn的时候自动隐藏dialog,通常需要做一些清理或者ajax操作,在bootstrap dialog中,这是通过 data-dismiss=" ...

  2. bootstrap学习笔记<八>(bootstrap核心布局风格——栅格系统)

    栅格系统(bootstrap的核心之一,也是bootstrap的主要布局风格) 栅格系统是对原有div布局的升级版.打破了传统div模式只能纵向垂直排列的弊端,大大提高了页面布局的速度和效果,也很好的 ...

  3. bootstrap学习笔记<一>(bootstrap用法)

    首先引入bootstrap官网链接:http://www.bootcss.com/ bootstrap 3下载地址:http://v3.bootcss.com/getting-started/#dow ...

  4. Bootstrap入门一:Hello Bootstrap

    一.Bootstrap简介 Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap是基于 HTML5.CSS3和Javascriopt开发的,它在 jQuery的基础上 ...

  5. 桂电在线-转变成bootstrap版2(记录学习bootstrap)

    下载bootstrap框架https://github.com/twbs/bootstrap 或者 http://getbootstrap.com/ 拷贝模板 修改基本模板 语言zh-cn,标题,描述 ...

  6. Create Dynamic Modal Dialog Form in AdminLTE Bootstrap template

    原文地址 Create modal dialog form in jquery using bootstrap framework, slightly different from the usual ...

  7. Bootstrap学习记录-2.container和table

    1. Container Bootstrap中容器类提供了2个类标识:container.container-fluid. 两者的区别在于: container:容器不止有15px的padding,还 ...

  8. bootstrap dialog对话框,完成操作提示框

    1. 依赖文件: bootstrap.js bootstrap-dialog.js bootstrap.css bootstrap-dialog.css 2.代码 BootstrapDialog.co ...

  9. Bootstrap Blazor 开源UI库介绍-Table 虚拟滚动行

    今天我们来介绍一下 Bootstrap Blazor 中 Table 组件的虚拟滚动行,什么是虚拟滚动呢,我查到的解释是:只渲染可视区域的列表项,非可见区域的 完全不渲染,在滚动条滚动时动态更新列表项 ...

随机推荐

  1. linuxmint卸载软件

    删除你已经卸载掉的软件包的命令为 sudo apt-get autoclean 还有一类软件包,我们每个人都应该删除,那就是你已经卸载了,但是一些只有它依赖而别的软件包都不需要的软件包还留在你的系统里 ...

  2. 解读QML之一

    http://cache.baiducontent.com/c?m=9d78d513d98002b8599dcb201a17a7374408c6347691c4523f8a9c12d522195646 ...

  3. [转]c++ new带括号和不带括号

    ref:http://m.blog.csdn.net/blog/u012745772/42420443 在new对象的时候有加上(),有不加(),不知道这个到底是什么区别?比如:CBase *base ...

  4. CURL C++网络延时或者最低网速下载设置

    1.起因: 下载游戏更新包客户反应更新时间太久,要求我们网速比较低的时候就不要更新 2.解决: 因为之前用的是curl下载,所以在查看了curl.h里面的说明后使用了以下两个option实现了下载时最 ...

  5. Goods transportation

    Goods transportation time limit per test 2 seconds memory limit per test 256 megabytes input standar ...

  6. Swift 常用字符串操作

    原文链接:http://www.jianshu.com/p/52e7580166ff 版本2:增加了Swift 2.0的语法,与Swift 1.2的语法相比,主要是:advance方法变成了advan ...

  7. gameUnity 0.2 网络游戏框架(计划)

    能说的就是 请大家都耐心等待,不做国产垃圾,只追求国外经典,这就是 这套框架未来的发展 一:2d 3d场景融合  人物移动 2d 3d 层 移动 有差值(共6层,2d天空层.前景3d物体层有 景深), ...

  8. CodeForces--TechnoCup--2016.10.15--ProblemB--Bill Total Value(字符串处理)

    Bill Total Value time limit per test 1 second memory limit per test 256 megabytes input standard inp ...

  9. poj 2594 Treasure Exploration(最小路径覆盖,可重点)

    题意:选出最小路径覆盖图中所有点,路径可以交叉,也就是允许路径有重复的点. 分析:这个题的难点在于如何解决有重复点的问题-方法就是使用Floyd求闭包,就是把间接相连的点直接连上边,然后就是求最小路径 ...

  10. FZU 2140 Forever 0.5(将圆离散化)

    主要就是将圆离散化,剩下的都好办 #include<iostream> #include<cstdio> #include<cstring> #include< ...