easyui datagrid deleteRow 删除行信息

最新推荐文章于 2024-11-26 10:39:48 发布

原创最新推荐文章于 2024-11-26 10:39:48 发布 · 1k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#easyui #datagrid

这篇博客展示了如何利用jQuery EasyUI的datagrid组件和JavaScript实现一个具有行号、多选、可折叠、分页功能的数据网格。通过定义列格式化函数，实现了删除行的操作，同时提供了获取选中行索引的辅助函数。内容涵盖了HTML和JavaScript的交互，以及前端数据展示的基本技巧。

html

	<table id="dg" class="easyui-datagrid" title=""></table>

	$(function() {          
            $('#dg').datagrid({
                rownumbers: true,
                multipleSelect:true,
                collapsible: false,
                pagination: true,
                url: 'datagrid/dg.json',
                method: 'get',
                columns: [
                    [{
                        field: 'ck',
                        checkbox: true
                    }, {
                        field: 'name',
                        title: '姓名'
                    }, {
                        field: 'tel',
                        title: '手机号码'
                    }, {
                        field: 'operate',
                        title: '操作',
                        formatter: function(val, row, index) {return '<a href="javascript:void(0);" onclick="deleteRow(this)"><i class="fa fa-trash-o" aria-hidden="true" style="color:#b8203d;font-size:2rem;"></i></a>';
                        }
                    }]
                ]
            })
        });

function getRowIndex(target) {
　　		var tr = $(target).closest('tr.datagrid-row');
			return parseInt(tr.attr('datagrid-row-index'));
		}
 
function deleteRow(target) {
　　alert(getRowIndex(target));
　　$('#membershipCardData1').datagrid('deleteRow', getRowIndex(target));
}