tablelist.js - ajax删除列表上的数据

tablelist.js对删除列表上的记录进行封装，通过调用remove函数配合后台php代码可以移除列表上的数据。

 

一、使用

1.页面引入tablelist.js，默认情况下，布局文件main.tpl已经引入。

2.页面初始化tablelist并使用：

    删除按钮绑定业务ID：object_id

<a href="javascript:void(0);" object_id="{$object.attr_id}" class="del border-none">删除</a>

    javascript绑定事件

<script type="text/javascript">
	var tablelist;
	$().ready(function() {
		tablelist = $("#table_list").tablelist();
		// 删除记录
		$("body").on('click', '.del', function() {
			var id = $(this).attr("object_id");
			tablelist.remove({
				confirm: '您确定删除这条记录吗？',
				url: 'delete',
				data: {
					id: id
				}
			});
		});
	});
</script>

 3.后台php编写对应的action，例如：

	public function actionDelete ()
	{
		$id = Filter::post('id', 0);
		
		try
		{
			AttributeDo::delete(0);
			return Result::json([
				'message' => '删除成功！'
			]);
		}
		catch(\Exception $e)
		{
			return Result::exception($e)->toJson();
		}
	}

 或者：

	/**
	 * 删除
	 */
	public function actionDelete ()
	{
		$id = Filter::post('id', 0);
		
		$count = Brand::deleteAll([
			'brand_id' => $id
		]);
		if($count == 1)
		{
			// 设置消息
			return Result::success([
				'message' => lang('delete-brand-success')
			])->toJson();
		}
		else
		{
			// 设置消息
			return Result::error([
				'message' => lang('delete-brand-fail')
			])->toJson();
		}
	}

 

二、代码说明：

tablelist.remove(options)的代码为：

// AJAX删除
	function remove(options) {

		var settings = this;

		var defaults = {
			url: url,
			type: 'POST',
			data: {

			},
			dataType: 'json',
			success: function(result) {

				if (result.code == 0) {
					var value = result.data;
					// 重新加载
					settings.load();
					// 如果有提示信息则显示
					if (result.message && $.trim(result.message) != '') {
						if ($.isFunction($.msg)) {
							$.msg(result.message, {
								icon: 1
							});
						} else {
							alert(result.message);
						}
					}
				} else if (result.message) {
					// 显示错误消息
					if ($.isFunction($.alert)) {
						$.alert(result.message, {
							icon: 2
						});
					} else {
						alert(result.message);
					}
				}

				// Ajax加载结束
				is_ajax_loading = false;
			}
		};

		options = $.extend(defaults, options);

		// POST提交需要获取CSRF
		if (options.type.toLowerCase() == 'post' && options.data['_csrf'] == undefined) {
			if ($("[name='_csrf']").size() > 0) {
				options.data['_csrf'] = $("[name='_csrf']:first").val();
			} else {
				var name = $.getCsrfParam();
				var value = $.getCsrfToken();
				options.data[name] = value;
			}
		}

		var localurl = location.pathname.substring(0, location.pathname.lastIndexOf("/") + 1);
		var url = options.url;

		if (url && url.indexOf("./") == 0) {
			url = localurl + url.substring(1);
		} else if (url && url.indexOf("/") != 0) {
			url = localurl + url;
		} else if (url == undefined || url == null || $.trim(url) == '') {
			url = localurl + url;
		}

		var confirm = options.confirm;

		if (confirm == undefined) {
			// 防止频繁点击重复提交
			if (is_ajax_loading) {
				return;
			}

			ajax(options);
		} else {
			if ($.isFunction($.confirm)) {
				$.confirm(confirm, {
					icon: 3
				}, function(index) {
					ajax(options);
				});
			} else if (confirm(confirm)) {
				ajax(options);
			}
		}
	}

 

 

二、参数说明：

tablelist.remove(options)中：

1.remove函数执行的是ajax调用，为了方便自定义，所以参数options为jquery中ajax所需要的参数，默认值如上面的代码可见。

2.一般仅需要三个参数：

url：指向删除的action，默认在当前页面的控制器内部，如果以“/”开头则指向网站根目录

data：后台删除数据需要的参数，类型同$.ajax参数的data，为对象类型

confirm：额外的参数，可以自定义删除前的询问提示，如果不为空则自动提示，为空则跳过。

type：表单的提交类型，默认值为“POST”

 

3.后台PHP传来的Result对象中，可以设置Result.data.icon设置前台显示图标，成功默认为“success”，失败默认为“error”；其他值包括（前台根据字符串来获取图标代码）：

var icons = ['warning'=>0, 'success'=>1, 'error'=>2, 'info'=>0];

 

 

其他的参数请参考jquery.ajax的API

 

三、快速开发

 

1.可以通过nii快速生成列表页面的相关代码