本文档介绍了如何使用easyUI的DataGrid组件进行表单的增加和删除操作。首先强调了查阅官方文档的重要性，接着展示了一个新增功能的弹窗效果，并提供了相关代码，包括弹出框代码、DataGrid列表、新增方法、加载表单数据及提交表单的方法。文章提到，还有通过编辑器直接在表单中编辑数据的另一种方式，建议读者参考easyUI文档自行学习。
使用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]"
required="true" onkeyup="this.value=this.value.replace(/[^\d\.]/g,'');" value=""/>
//这里是加了一些金额限制，只能输入数字
</div>
<i>*</i>
</li>
</ul>
</div>
<!-- 添加汇总限制性条件弹窗 -->
- DataGrid 列表
function initProjectPhasedRepayment() {
// 列表加载
$('#loanTrialtab')
.datagrid(
{
width : 600,//宽度
height : 'auto',//高度
fitColumns : true,//设置为 true，则会自动扩大或缩小列的尺寸以适应网格的宽度并且防止水平滚动。
rownumbers : true,//设置为 true，则显示带有行号的列。
striped : true,//设置为 true，则把行条纹化。（即奇偶行使用不同背景色）
singleSelect : true,//设置为 true，则只允许选中一行。
page:1,
rows:10,
resize : 'auto',
columns : [ [ {
field : 'id',
hidden : true
}, {
title : '请选择抵账项目',
field : 'planProject',
width : 150,
align : 'left',
editable:false
}, {
field : 'planAmount',
title : '抵扣金额(万元)',
width : 150,
align : 'left'
} ] ],
toolbar : [
{
text : '新增',
iconCls : 'icon-add',//定义按钮的样式
handler : function() {
openDialog(); //这里是自己写的新增的方法，也可以在这里面直接用编辑器完成新增，我这种是因为其中的在下拉框中编辑会有浏览器产出的bug，所以用的弹出框形式
}
},
'-',
{
text : '删除',
iconCls : 'icon-remove',//定义按钮的样式
handler : function() {
var row = $('#loanTrialtab')
.datagrid('getSelected');//这里是获取选中行
if (row) {//当row 为选中行时进入方法调用deleteRow删除
var rowIndex = $('#loanTrialtab').datagrid(
'getRowIndex',row)
$('#loanTrialtab').datagrid(
'deleteRow', rowIndex);
} else {
//提示错误信息，这里我们是内部封装的方法就不展示了
}
}
} ],
onBeforeLoad : function() {
$('#loanTrialtab').datagrid('rejectChanges');
},
onClickRow : function(rowIndex) {
if (validatePlanRows()) {
$('#loanTrialtab').datagrid('acceptChanges');
$('#loanTrialtab').datagrid('beginEdit',rowIndex);
}
},
onLoadSuccess : function() {
//当数据加载成功时触发。
}
});
selectFrom(); //此方法
}
- 新增方法
function openDialog(){//这里是一个弹出框
$('#addloanAccount_dialog').dialog("open").dialog('setTitle', '新增').window('resize',{
top:200, left:300
});
}
- function需要加载一下
$(function() {
initDialog();//这里是直接放到function中，因为页面会首先加载function，所以写在这里是加载控件
setTimeout("initProjectPhasedRepayment()", 300); //这里延迟0.3s加载表单控件
}
6.initDialog
//保存
function initDialog(){
$('#addloanAccount_dialog').dialog({
modal:true,
onClose : function() {
},
buttons:[{
text:'确定',
id:'dialogSaveBtntwe',
handler:function(){
var planProject =$("#planProject").combobox("getText");
var planAmount =$("#planAmount").val();
var a=false;
//因为我设置的这俩参数是必填，这里就是判断他们是否为空
if(planProject.length==0||planProject==""){
a=false;
}else{
a=true;
}
if(planAmount.length==0||planAmount==""){
a=false;
}else{
a=true;
}
if(a==true){
$('#loanTrialtab').datagrid('insertRow', {
row : {
planProject : planProject,
planAmount : planAmount
}
});
$('#addloanAccount_dialog').dialog('close');
}else{
//这里弹出错误信息
return false;
}
}
},{
text:'关闭',
handler:function(){
$('#addloanAccount_dialog').dialog('close');
}
}]
});
}
7.initDialog
提交表单的方法
表单我没有写出来，这里就参照你们的保存或提交方法了
//这里的写法就是获取填写好了的datagrid的数据，然后把我们前面定义的input的value值，变成我们的datagrid的数据，这样就把datagrid的值变成了一个input啦，就不用再去列多个字段，或者新建一个对象啥的了
const objToStr = JSON.stringify(getRepaymentData());
$("#accountsPayable").val(objToStr);
8.获取表单数据、
//获取datagrid数据
function getRepaymentData(){
$('#loanTrialtab').datagrid('acceptChanges');
var date = $('#loanTrialtab').datagrid('getRows');
return date;
};
9.加载后台的数据到datagrid上面 selectFrom
function selectFrom(){
//${repayDebt.accountsPayable}这个值就是我后台刚刚保存了的值，因为我是把datagrid的值存成了一个字符串的
var dd = JSON.parse('${repayDebt.accountsPayable}');//这里后台传过来的值需要转换一下，因为我是用字符串保存这个datagrid的数据的
if(dd!=null&&dd!=""){
var str1 = null;
var str2 = null;
var str3 = null;
var regPos = /^\d+(\.\d+)?$/; //非负浮点数
for (var p in dd) {//遍历json数组时，这么写p为索引，0,1
str1 = dd[p].id;
str2 = dd[p].planProject;
str3 = dd[p].planAmount;
if(regPos.test(p)){
$('#loanTrialtab').datagrid('appendRow',{
id: str1,
planProject: str2,
planAmount: str3
});
}
}
}
}
10.最后再来个后台怎么取出表单数据吧
//导入的是import net.sf.json.JSONArray;
//import net.sf.json.JSONObject; 这俩也是我遇到的坑，由于导入的包不对也出过错
JSONArray jsonArray1 = JSONArray.fromObject(repayDebt.getAccountsPayable());
for (int i = 0; i < jsonArray1.size(); i++) {
JSONObject jsonObj = jsonArray1.getJSONObject(i);
String planAmount = jsonObj.getString("planAmount");
String planProject = jsonObj.getString("planProject");
}
代码顺序些混乱了，但是逻辑应该还是清楚的
可能看着没什么说明，但看注释都差不多在代码里面写了，我也不多说啥了。本来也不是什么很复杂的东西，主要是看那个easyui的说明文档。
有两种方式可以实现往datagrid插入数据的，我这种是加了个弹出框，还有一种方式就是加编辑器，然后直接在表单中数据，具体方式也差不多，需要调用editor编辑器，这种方式大家可以看下说明文档，应该没什么问题。
这个东西也算是我这个小菜鸟的一个总结吧，加油明天！
扫一扫
1897
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
