1.x-editable-行内编辑——2.时间格式转换——3.toastr提-示插件——4.switch-开关——5.初始化表格高度——6.ztree树结构+藏于input+区域外点击事件——7.下一行add
引入文件：链接: https://pan.baidu.com/s/1diKFQqWBijjkB5mP7Pir5Q 提取码: fibe
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-table/1.15.4/bootstrap-table.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" />
<link href="https://cdn.bootcss.com/bootstrap-switch/3.3.4/css/bootstrap3/bootstrap-switch.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.15.4/bootstrap-table.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-switch/3.3.4/js/bootstrap-switch.min.js"></script>
<!-- 中文汉化包 -->
<script src="https://cdn.bootcss.com/bootstrap-table/1.1.4/locale/bootstrap-table-zh-CN.min.js"></script>
<!-- toastr插件-右上侧弹框提示 -->
<link href="~/Scripts/toastr/toastr.css" rel="stylesheet" />
<script src="~/Scripts/toastr/toastr.js"></script>
<!-- x-editable插件-bootstrap行内编辑JS组件 -->
<link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<script src="~/Scripts/bootstrap-table-editable/bootstrap-table-editable.js"></script>
<!-- zTree插件 -->
<link href="~/Scripts/zTree_v3/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
<script src="~/Scripts/zTree_v3/js/jquery.ztree.all.min.js"></script>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<table class="table" ></table>
</div>
</div>
</div>
<input />
<script type="text/javascript">
//初始化toastr插件-右上侧弹框提示
toastr.options.positionClass = 'toast-top-right';
//时间格式化
function ChangeDateFormat(jsondate) {
jsondate = jsondate.replace("/Date(", "").replace(")/", "");
if (jsondate.indexOf("+") > 0) {
jsondate = jsondate.substring(0, jsondate.indexOf("+"));
}
else if (jsondate.indexOf("-") > 0) {
jsondate = jsondate.substring(0, jsondate.indexOf("-"));
}
var date = new Date(parseInt(jsondate, 10));
var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
var second = date.getMilliseconds() / 1000 < 10 ? "0" + parseInt(date.getMilliseconds() / 1000) : parseInt(date.getMilliseconds() / 1000);
return date.getFullYear() + "-" + month + "-" + currentDate + " " + hours + ":" + minutes + ":" + second;
};
//初始化表格高度,以保证分页工具栏始终显示
function initTableHeight() {
//拿到父窗口的centerTabs高度(这是iframe子页面拿到父窗口元素的方法，需要根据自己项目所使用的框架自行修改元素的id)
var panelH = $("#layuiminiHomeTabIframe", parent.document).height();
//拿到顶部工具栏高度
var toolBarH = $(".bs-bars.pull-left").height();
//计算表格container该设置的高度
var height = panelH - toolBarH - 155;
var container = $(".fixed-table-container").css({ "height": height });
}
</script>
<script>
//Input树状图展示
var setting = {
data: {
simpleData: {
enable: true,
idKey: "d_id",
pIdKey: "d_pid",
rootPId: 0,
},
key: {
name: "d_name"
}
},
async: {
//异步加载
enable: true,
contentType: "application/json",
url: "/Admin/Office_GetDepartment",
},
//回调
callback: {
onClick: zTreeOnClick
},
view: {
fontCss: { fontSize: "14px" },
showIcon: true,//设置 zTree 是否显示节点的图标。
showLine: true,//设置 zTree 是否显示节点之间的连线。
}
};
//下拉框显示
function showTree(o_id) {
$("#ztree" + o_id + "").css('display', 'block');
$.fn.zTree.init($("#ztree" + o_id + ""), setting);
$("#watchDog").val(o_id);
}
//节点点击事件
function zTreeOnClick(event, treeId, treeNode) {
var o_id = $("#watchDog").val();
$("#input" + o_id + "").val(treeNode.d_name);
$.ajax({
url: "/Admin/OfficeD_Edit",//发送请求的地址
type: "POST",// POST，默认是GET
dataType: 'json',//根据返回数据类型可以有这些类型可选：xml html script json jsonp text
async: true,//是否异步请求
data: {//请求携带的参数信息
o_id: o_id,
d_id: treeNode.d_id
},
success: function (msg) {//请求成功
toastr.info(msg);
}
});
hideTree();
};
//区域外点击事件///!!!可以自己F12找event.target
function onBodyDownByActionType(event) {
var o_id = $("#watchDog").val();
if (event.target.id.indexOf("ztree" + o_id + "") == -1) {
hideTree();
}
}
$("body").bind("mousedown", onBodyDownByActionType);
//下拉框隐藏
function hideTree() {
var o_id = $("#watchDog").val();
$("#ztree" + o_id + "").css('display', 'none');
$("#ztree" + o_id + "").empty();
}
</script>
<script type="text/javascript">
$('#OfficeTable').bootstrapTable('destroy'); //动态加载表格之前，先销毁表格
$('#OfficeTable').bootstrapTable({//初始化bootstrapTable
method: 'POST',
url: '/Admin/OfficeTable',
uniqueId: "o_id",
//toolbar: '#toolbar', //工具按钮用哪个容器
pageNumber: 1, //初始化加载第一页
pagination: true,//是否分页
pageSize: 10,//单页记录数
pageList: [10, 20, 50],//可选择单页记录数
showRefresh: false,//刷新按钮
search: true,//是否显示右上角的搜索框
sidePagination: 'server',//server:服务器端分页|client：前端分页
contentType: "application/x-www-form-urlencoded",
onLoadSuccess: Status,
columns: [{
title: '编号',
field: 'o_order',
align: 'center',
}, {
title: '名称',
field: 'o_name',
align: 'center',
formatter: function (value, row, index) {
return "<a href='#' data='o_name' ;
}
}, {
title: '所属部门',
field: 'd_name',
align: 'center',
20,
formatter: function (value, row, index) {
return '<input style=" auto;height: 29px;text-align :center" class="form-control" id=ztree' + row.o_id + '></ul>';
}
}, {
title: '创建时间',
field: 'o_create',
align: 'center',
formatter: function (value, row, index) {
return ChangeDateFormat(value);
}
}, {
title: '状态',
field: 'o_status',
align: 'center',
formatter: function (value, row, index) {
if (row.o_status == "false") {
return "<input ;
} else {
return "<input ;
}
},
}, {
title: '操作栏',
field: 'Button',
align: 'center',
formatter: function (value, row, index) {
if (document.getElementsByTagName('input')[0].value == "") {
return '<button type="button" onclick="del(' + row.o_id + ')" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-trash"></span></button><button type="button" onclick="add(' + row.o_id + ',' + row.o_did + ')" class="btn btn-primary btn-sm"><span class="glyphicon glyphicon-plus"></span></button>';
} else {
return '<button type="button" onclick="del(' + row.o_id + ')" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-trash"></span></button>';
}
},
}],
});
//初始化表格高度
$(initTableHeight());
//删除按钮
function del(o_id) {
$.ajax({
url: "/Admin/Office_Del",//发送请求的地址
type: "POST",// POST，默认是GET
dataType: 'json',//根据返回数据类型可以有这些类型可选：xml html script json jsonp text
async: true,//是否异步请求
data: {//请求携带的参数信息
o_id: o_id
},
success: function (msg) {//请求成功
toastr.info(msg);
if (msg == "删除成功！") {
$('#OfficeTable').bootstrapTable('removeByUniqueId', o_id)
Status()
}
},
});
};
//添加按钮
function add(o_id, o_did) {
$.ajax({
url: "/Admin/Office_Add",//发送请求的地址
type: "POST",// POST，默认是GET
dataType: 'json',//根据返回数据类型可以有这些类型可选：xml html script json jsonp text
async: true,//是否异步请求
data: {//请求携带的参数信息
o_id: o_id,
o_did: o_did
},
success: function (msg) {//请求成功
toastr.info(msg);
$('#OfficeTable').bootstrapTable('refresh')
}
});
}
function Edit() {//X_editable行内编辑
$('#OfficeTable a').editable({
type: "text", //编辑框的类型。支持text|textarea|select|date|checklist等
mode: "popup", //编辑框的模式：支持popup和inline两种模式，默认是popup
validate: function (value) { //字段验证
if (!$.trim(value)) {
return '不能为空';
return false;
}
if (value.length > 51) {
return '字符长度不得超过50！';
}
var o_id = this.attributes.id.nodeValue;//ID
var field = this.attributes.data.nodeValue;//修改的字段
$.ajax({
url: "/Admin/OfficeEdit",//发送请求的地址
type: "POST",// POST，默认是GET
dataType: 'json',//根据返回数据类型可以有这些类型可选：xml html script json jsonp text
async: true,//是否异步请求
data: {//请求携带的参数信息
o_id: o_id,
field: field,
value: value,
},
success: function (msg) {//请求成功
toastr.info(msg);
}
});
}
});
}
function Status() {// 启用/冻结
$('[name="my-checkbox"]').bootstrapSwitch({
onText: "启用",
offText: "冻结",
onColor: "success",
offColor: "danger",
size: "small",
onSwitchChange: function (event, state) {
var o_id = event.currentTarget.attributes.id.nodeValue;
$.ajax({
type: "post",
url: "/Admin/OfficeStatus",
dataType: 'json',
async: true,//是否异步请求
data: {
o_id: o_id,
state: state
},
success: function (data) {
toastr.info(data)
}
})
}
})
//行内编辑初始化
Edit()
}
</script>