app.js
/* ------------------------------------------------------------------------------ * * 后台列表页封装:包括checkbox选中,行选中,操作封装,隔行变色等 * # how2use * window.onload = function () { * app.init({_csrf_token: "a3d45e"}); * } * * ---------------------------------------------------------------------------- */ var app = function () { var $this; var defaults = { checkbox_name: "ids[]", //checkbox name checkbox_checkall_name: "checkall", //全选input name toggle_bgcolor: "#EEEEEE", //隔行变色 色值 highnight_bgcolor: "#B2E0FF" //鼠标高亮 色值 }; return { init: function (option) { $this = this; $this.config = $.extend(defaults, option); $this.initDom(); $this.initOperate(); }, initDom: function () { //隔行变色 $("tr:gt(0):even").css("background-color", $this.config.toggle_bgcolor); //鼠标经过变色 $("table tr:gt(0)").each(function () { var default_bgcolor = $(this).css("background-color"); $(this).on('mouseover', function () { $(this).css("background-color", $this.config.highnight_bgcolor); }); $(this).on('mouseout', function () { $(this).css("background-color", default_bgcolor); }); }); // Form $("form").each(function () { if (!$(this).find('input[name="_csrf_token"]').length) { $(this).append('<input type="hidden" name="_csrf_token" value="' + $this.config._csrf_token + '">'); } }); $('form button[type="reset"]').click(function(){ window.location.href = window.location.pathname; }); }, initOperate: function () { //checkbox全选 $("input[name='" + $this.config.checkbox_checkall_name + "']").click(function () { var checked = $(this).is(":checked"); $("input[name='" + $this.config.checkbox_name + "']").each(function () { if ($(this).prop("disabled") == true) return false; $(this).prop("checked", checked); }); operate.checkBoxSetButton(); }); $("input[name='" + $this.config.checkbox_name + "']").change(function () { operate.checkBoxOpt($(this)); operate.checkBoxSetButton(); }); //行操作 $("table tr:gt(0) td").click(function () { operate.selectRow($(this)); operate.checkBoxSetButton(); }); //批量操作 $('a[data-operate="batch"], button[data-operate="batch"], input[data-operate="batch"]').click(function () { operate.batchModel($(this)); }); //简单异步get/post操作 $('a[data-operate="get"], button[data-operate="get"],a[data-operate="post"], button[data-operate="post"]').each(function(){ $(this).on('click', function() { operate.simpleAjaxRequest($(this)); }); }); //添加编辑弹出层操作 $('a[data-operate="add"], button[data-operate="add"],a[data-operate="edit"], button[data-operate="edit"]').click(function () { operate.ajaxModal($(this)); }); //删除操作弹出层操作 $('a[data-operate="delete"], button[data-operate="delete"]').click(function () { operate.deleteModal($(this)); }); } } }();
操作js
/* ------------------------------------------------------------------------------ * * 表单操作类 基于lhgdialog弹窗插件 * <button data-operate="post" data-url="{:U('post')}" data-param-a="v1" data-param-b="v2">异步post请求</button> * ---------------------------------------------------------------------------- */ var operate = function () { var request_handler = false; return { //异步请求弹出modal框 ajaxModal: function (obj) { var id = obj.data('id'); var url = obj.data('url'); $.dialog({id: "dialog_win", content: "url:" + url}); }, ajaxSaveForm: function ($submit, request_url, request_data, success_callback, failed_callback) { var _this = $submit; _this.attr('disabled', 'disabled'); //判断ajax是否执行完成 if (request_handler === true) { return false; } request_handler = true; $.ajax({ type: "POST", dataType: "json", url: request_url, data: request_data, success: function (result) { request_handler = false; var msg = result.status ? "操作成功" : (result.info ? result.info : "操作失败"); if (result.status) { if (typeof(success_callback) !== 'function') { setTimeout(function () { window.location.reload(); }, 1000); } else { success_callback(result); } } else { _this.removeAttr('disabled'); $form.find('input[name="_csrf_token"]').val(result._csrf_token); if (typeof(failed_callback) == 'function') { failed_callback(result); } } }, error: function (e) { request_handler = false; } }) }, simpleAjaxRequest: function (obj) { var request_type = obj.data('operate'); var request_url = obj.data('url'); var success_callback = obj.data('success'); var failed_callback = obj.data('failed'); var request_data = {}; //获取post传递的参数 $.each(obj[0].attributes, function (i, attr) { var attr_name = attr.name; var attr_value = attr.value; if (attr_name.indexOf('data-param-') != -1) { attr_name = attr_name.replace(/data-param-/g, ""); request_data[attr_name] = attr_value; } }); if (!request_url) { operate.showMessage("无效请求URL"); return false; } //判断ajax是否执行完成 if (request_handler === true) { return false; } request_handler = true; $.ajax({ type: request_type, dataType: "json", url: request_url, data: request_data, success: function (result) { request_handler = false; var msg = result.status ? "操作成功" : (result.info ? result.info : "操作失败"); operate.showMessage(msg); if (result.status) { if (success_callback) { try { var fn = window[success_callback]; fn(obj, result.data); } catch (e) { operate.showMessage(e.message); } } } else { if (failed_callback) { try { var fn = window[failed_callback]; fn(obj, result.data); } catch (e) { operate.showMessage(e.message); } } } }, error: function (e) { request_handler = false; operate.showMessage("请求异常:" + e.message); } }) }, //删除 deleteModal: function (obj) { var id = obj.data('id'); var url = obj.data('url'); var success_callback = obj.data('success'); var title = obj.data('title') ? obj.data('title') : '您确认要删除此条记录吗?'; if (!id || !url) { operate.showMessage("参数传递有误"); return false; } $.dialog.confirm(title, function () { //判断ajax是否执行完成 if (request_handler === true) { return false; } request_handler = true; $.ajax({ type: "GET", cache: false, dataType: 'json', url: url, data: {id: id}, success: function (result) { request_handler = false; var msg = result.status ? "操作成功" : (result.info ? result.info : "操作失败"); this.content(msg).time(3); if (result.status) { if (success_callback) { try { var fn = window[failed_callback]; fn(obj, result.data); } catch (e) { this.content(e.message).time(3); } } } } }); }); }, //选中行操作 selectRow: function (obj) { if (obj.hasClass("action") == true) return false; //操作列剔除 if (obj.siblings("td:eq(0)").children(":checkbox").prop("disabled") == true) return false; var checked = obj.siblings("td:eq(0)").children(":checkbox").is(":checked"); obj.siblings("td:eq(0)").children(":checkbox").prop("checked", !checked); }, //checkbox选中 checkBoxOpt: function (obj) { var checked = obj.is(":checked"); obj.prop("checked", checked); }, checkBoxSetButton: function () { listchecked = !($("input:checked[name='" + app.config.checkbox_name + "']").length > 0); $("input[data-operate='batch']").each(function () { $(this).attr('disabled', listchecked); }); }, //批量操作 batchModel: function (obj) { var title = obj.data('title') ? obj.data('title') : '您确认要批量删除吗?'; var request_data = obj.data('attributes'); var url = obj.data('url'); var success_callback = obj.data('success'); listchecked = $("input:checked[name='" + app.config.checkbox_name + "']").length > 0; if (listchecked) { var data = new Array(); $("input:checked[name='" + app.config.checkbox_name + "']").each(function () { if ($(this).prop("checked") == true) { if ($(this).prop("disabled") == true) return true; if (request_data) { var request_param = {}; request_data = request_data.toString().split(","); //字符分割 for (var i = 0; i < request_data.length; i++) { request_param[request_data[i]] = $(this).data(request_data[i]) || ''; request_param['id'] = $(this).val(); } } else { request_param = {"id": $(this).val()}; } data.push(request_param); } }); $.dialog.confirm(title, function () { //判断ajax是否执行完成 if (request_handler === true) { return false; } request_handler = true; $.ajax({ type: "GET", cache: false, dataType: 'json', url: url, data: {data: data}, success: function (result) { request_handler = false; var msg = result.status ? "操作成功" : (result.info ? result.info : "操作失败"); this.content(msg).time(3); if (result.status) { if (success_callback) { try { var fn = window[success_callback]; fn(obj, result.data); } catch (e) { this.content(e.message).time(3); } } } } }); }); } else { operate.showMessage("请勾选后再操作"); } }, showMessage: function (msg) { $.dialog({id: "msg", time: 3, content: msg, lock: true, icon: "warning", title: "温馨提示"}); } }; }();
asdfas
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Core JS files -->
<script type="text/javascript" src="/Public/js/core/libraries/jquery.min.js"></script>
<!-- Core JS files -->
<script type="text/javascript" src="/Public/js/core/app.js"></script>
<script type="text/javascript" src="/Public/js/core/operate.js"></script>
<script type="text/javascript">
window.onload = function () {
app.init({});
}
</script>
<!-- /Core JS files -->
</head>
<body data-spy="scroll" data-target=".sidebar-detached" class="navbar-top has-detached-right ">
<!-- Page container -->
<div class="page-container">
<!-- Page content -->
<div class="page-content">
<!-- Main content -->
<div class="content-wrapper">
<div class="content">
<div class="panel panel-flat border-top-primary border-top-lg">
<div class="panel-body">
<div class="btn-group">
<input type="submit" class="btn btn-primary" data-operate="batch" value="批量删除" disabled/>
<input type="submit" class="btn btn-primary" data-operate="batch" value="启用" disabled/>
</div>
</div>
</div>
<div class="panel border-top-primary border-top-lg">
<div class="table-responsive">
<table class="table table-bordered table-striped table-hover table-xxs">
<thead>
<tr>
<th><input type="checkbox" name="checkall"/></th>
<th>唯一编码</th>
<th>厂商名称</th>
<th>关联品牌</th>
<th>排序</th>
<th width="270">操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="ids[]" value="404" readonly="true"></td>
<td>FACT0000394</td>
<td><a href="http://www.baidu.com">进口雅宾纳</a> </td>
<td>雅宾纳</td>
<td>0</td>
<td>
<button class="btn btn-xs bg-orange-600" data-operate="edit" data-url="/Car/editFactory/id/404"><i class="icon-pencil7"></i> 编辑</button>
<button class="btn btn-xs bg-danger-600" data-operate="delete" data-id="404" data-url="/Car/deleteFactory"><i class="icon-trash"></i> 删除</button>
</td>
</tr>
<tr>
<td><input type="checkbox" name="ids[]" value="403" readonly="true"></td>
<td>FACT0000393</td>
<td><a href="http://www.baidu.com">驭胜</a> </td>
<td>驭胜</td>
<td>0</td>
<td>
<button class="btn btn-xs bg-orange-600" data-operate="edit" data-url="/Car/editFactory/id/403"><i class="icon-pencil7"></i> 编辑</button>
<button class="btn btn-xs bg-danger-600" data-operate="delete" data-id="403" data-url="/Car/deleteFactory"><i class="icon-trash"></i> 删除</button>
</td>
</tr>
<tr>
<td><input type="checkbox" name="ids[]" value="402" readonly="true"></td>
<td>FACT0000392</td>
<td><a href="http://www.baidu.com">小鹏汽车</a> </td>
<td>小鹏汽车</td>
<td>0</td>
<td>
<button class="btn btn-xs bg-orange-600" data-operate="edit" data-url="/Car/editFactory/id/402"><i class="icon-pencil7"></i> 编辑</button>
<button class="btn btn-xs bg-danger-600" data-operate="delete" data-id="402" data-url="/Car/deleteFactory"><i class="icon-trash"></i> 删除</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- /main content -->
</div>
<!-- /page content -->
</div>
<!-- /page container -->
</body>
</html>