使用easyUI的DataGrid对表单进行增删

最新推荐文章于 2020-09-06 20:43:55 发布

原创

最新推荐文章于 2020-09-06 20:43:55 发布 · 413 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#easyui #js

本文档介绍了如何使用easyUI的DataGrid组件进行表单的增加和删除操作。首先强调了查阅官方文档的重要性，接着展示了一个新增功能的弹窗效果，并提供了相关代码，包括弹出框代码、DataGrid列表、新增方法、加载表单数据及提交表单的方法。文章提到，还有通过编辑器直接在表单中编辑数据的另一种方式，建议读者参考easyUI文档自行学习。

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

使用easyUI的DataGrid对表单进行增删

首先我还是建议大家在写代码的时候对easyUI的文档进行一个了解，我自己就是在写代码的时候没有看文档，然后各种东西都是百度搜搜搜，写的很没有效率，而且对代码的了解也不够。

easyui文档链接： http://www.jeasyui.net/vue/655.html.

先上一个效果图
在这里插入图片描述
点击新增后就会有弹出框：

话不多说直接上代码

首先我们要先创建一个表单

    <div>
	    <span class="font7 font11">抵扣项目及金额：</span>
	    <table id="loanTrialtab"></table>
	</div>
	//这里这个input是我用来存loanTrialtab数据的地方，我采用的方式是把这个表单的数据用一个String来存到数据库，页面就给他弄成Json传
    <input type="hidden" id="accountsPayable" name="accountsPayable" />

弹出框代码

    <div id="addloanAccount_dialog" style="width:660px;height:300px;*height:300px;" class="easyui-window" closed="true" maximizable="false" minimizable="false">
							<ul class="main_key_ul ul400">
								<li>
				                   <span>请选择抵账项目：</span>
				                   <div class="div_style">
				                   //下拉框需要验证加是否必填，required这个参数对下拉框好像没有限制到，所以要另外验证  editable设置是否可以对下拉框输入
				                   	<select name="planProject"  id="planProject" required="true" class="input_style easyui-combobox" editable="false" required="true" style="width: 200px;" panelwidth="200px"	panelheight="auto">
				                   	//panelwidth这个参数是设置下拉框的默认宽度，因为不设置可能会存在下拉框加载不出来的情况（我觉得就是我用的浏览器太老了）
				                   		<option value="担保费">担保费</option>
				                   		<option value="其他手续费">其他手续费</option>
				                   		<option value="逾期手续费">逾期手续费</option>
				                   		<option value="委贷手续费">委贷手续费</option>
				                   	</select>
				                   </div>
				                   <i>*</i>
				                   
								</li>
								<li>
				                   <span>抵扣金额(万元)：</span>
				                   <div class="div_style">
				                   	<input  class="input_style easyui-validatebox amountUnify " style="width:200px;" name="planAmount" 
				                   	type="text" maxlength="12" id="planAmount"	validType="validateDouble[9,6]" 
				                   	require