java项目easyui-datagrid的动态增删改

最新推荐文章于 2022-05-07 20:24:01 发布

不掉发的码农

最新推荐文章于 2022-05-07 20:24:01 发布

阅读量442

点赞数

文章标签： easyui-datagrid 动态增删改

本文链接：https://blog.youkuaiyun.com/weixin_42401867/article/details/87371206

版权

本文详细介绍如何使用EasyUI框架中的Datagrid组件进行数据的新增、修改和删除操作。通过具体的JSP页面代码示例，讲解了如何实现数据行的插入、更新和移除功能，适用于前端开发人员快速上手EasyUI Datagrid。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jsp页面代码


<div id="DG"  style="width:100%;height: 100%"></div>
<div id="toolbar">
	<a href="javascript:addfn()" class="easyui-linkbutton" id="toAdd"
	iconCls="icon-add" plain="true">新增</a>
	<a href="javascript:void(0);" class="easyui-linkbutton" id="delBtn"
	iconCls="icon-remove" plain="true" onclick="del();">删除</a>
	&nbsp;&nbsp;查询字段：&nbsp;<input class="easyui-textbox"  type="text"     
    id="searchWord" size="20" /> 
	<a href="javascript:loadDg()" class="easyui-linkbutton"
	data-options="iconCls:'icon-search'">查询</a>
</div>

js代码，新增


var rows = $('#DG').datagrid("getRows");
$('#DG').datagrid('insertRow', {
	index : rows.length + 1, //添加到最后一行
		row : {//对应生成datagrid的列
						kid : '新增的值',
						na : '新增的值',
						memo : '新增的值',
						skey :'新增的值',
						skeyBoy : '新增的值',
					}，
                    //formate方法
//datagrid不需要加入formate属性，如果是datalist则需要
				});

修改

var row1 = $('#DG').datagrid("getSelected");//获取到datagrid选择的行
				var rowIndex = $('#DG').datagrid('getRowIndex', row1);
				$('#DG').datagrid('updateRow', {
					index :rowIndex,
					row : {
						//对应生成datagrid的列
						na : '修改后的值',
						memo : '修改后的值',
						skey :'修改后的值',
						skeyBoy : '修改后的值',
					},
                    //formate方法
//datagrid不需要加入formate属性，如果是datalist则需要
				});

删除

//获取勾选的行
var checked= $('#Dl').datagrid("getChecked");
for (var i = 0; i < checked.length; i++) {
				row = checked[i];
				//获取行号并删除
				var rowIndex = $('#Dl').datagrid('getRowIndex', row);
				$('#Dl').datagrid("deleteRow", rowIndex);
}