layui table direct editing

Modify lay\modules\table.js

in TPL_HEADER

,'{
   
   {# if(item2.type === "checkbox"){ }}' //复选框

Modified to not display header row checkbox

,'{
   
   {# if(item2.type === "checkbox" && (item2.header === undefined || item2.header)){ }}' //复选框

Page tips:

<button class="layui-btn layui-btn-urls" data-type="add">
  <i class="layui-icon">&#xe624;</i>增加请求
</button>
<button class="layui-btn layui-btn-urls" data-type="save">
  <i class="layui-icon">&#xe642;</i>保存
</button>
<blockquote class="layui-elem-quote layui-text" style="padding:unset;margin:unset;padding-left:10px;font-size:10px;line-height:1;">
	<ul>
		<li>单击数据行可以直接编辑;</li>
		<li>名称与请求地址必填;</li>
	</ul>
</blockquote>

js

<script type="text/html" id="editItem">
      <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
	layui.use(['table'], function () {
		var $ = layui.$
		, layer = layui.layer
		, table = layui.table;

		$.getJSON("/api/v1/getUrls", function (data) {
			data.forEach(function (d) {
				d[table.config.checkName] = d.Status;
			});
			table.render({
				elem: '#LAY-urls-list',
				id: 'LAY-urls-list',
				data: data,
				page: false,
				cols: [[
				{ type: 'numbers', fixed: 'left' }
				, { field: 'Name', title: '名称', width: 100, edit:"text"}
				, { field: 'Url', title: '请求地址', width: 200, edit:"text" }
				, { type: 'checkbox',title: '是否启用',width: 100,header:false}
				, { title: '#', toolbar: '#editItem', width: 100,align:"center" }
				]]
			});
		});
        
		//勾选复选框,设置Status字段值
		table.on("checkbox(LAY-urls-list)", function (obj) {
			obj.update({ Status: obj.checked });
		});

        //行事件
		table.on('tool(LAY-urls-list)', function (obj) {
			var row = obj.data;
			var layEvent = obj.event;
			var tr = obj.tr;
			if (layEvent === 'del') {
				if (!row.Name && !row.Url) {
					var data = table.cache['LAY-urls-list'];
					data.splice(tr.data("index"), 1);
					table.reload('LAY-urls-list', { data: data });
				}
				else {
					layer.confirm("确定删除[" + (row.Status ? "启用" : "禁用") + "]状态请求[" + (row.Name || row.Url) + "]吗?", function (index) {
						layer.close(index);
						var data = table.cache['LAY-urls-list'];
						data.splice(tr.data("index"), 1);
						table.reload('LAY-urls-list', { data: data });
					});
				}
			}
		});

		//事件
		var actions = {
			add: function () {
				var data = {Status:true}
				data[table.config.checkName] = true;
				var list = table.cache['LAY-urls-list'];
				list.push(data);
				table.reload('LAY-urls-list', { data: list });
			}
			, save: function () {
				var ds = table.cache['LAY-urls-list'];
				var nds = ds.filter(function (i) { return !i.Name || !i.Url });
				if (nds.length)
				{
					layer.alert("请填写完整请求信息!");
					return;
				}

				$.ajax({
					url: "/api/v1/saveUrls",
					type: 'post',
					contentType: 'application/json',
					data: JSON.stringify(ds),
					dataType: 'json',
					cache: false,
					success: function (rst) {
						if (rst.flag) {
							layer.alert("保存成功!");
						}
						else {
							layer.alert(rst.msg || "服务器错误");
						}
					},
					error: function (jqXHR, textStatus, errorThrown) {
						layer.alert(jqXHR.responseText);
					}
				});
			}
		};

        //绑定事件
		$('.layui-btn.layui-btn-urls').on('click', function () {
			var type = $(this).data('type');
			actions[type] && actions[type].call(this);
		});
	});
</script>

Effect:

 

Guess you like

Origin blog.csdn.net/zhchfsky/article/details/125768242