实现效果
首先是前台页面,定义一个datagrid
<div id="tb" style="height:auto">
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true">添加</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove"plain="true">删除</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-save" plain="true">保存</a>
</div>
<table id="addRule" class="easyui-datagrid"></table>
js填充表格数据,要开启行编辑必须有onClickRow属性,并在需要编辑的column上加editor
var editIndex = undefined;//定义编辑行的index
$('#addRule').datagrid({
url: 'url',//请求的url
nowrap: false,//是否换行
fitColumns: true,//是否自适应
onClickRow:function(rowIndex, rowData){// 鼠标单击某一行是开启该行的编辑状态
if (editIndex != rowIndex){
if (endEditing()){
$('#addRule').datagrid('selectRow', rowIndex)
.datagrid('beginEdit', rowIndex);
editIndex = rowIndex;
} else {
$('#addRule').datagrid('selectRow', editIndex);
}
}
},
columns: [[
{
field: 'fieldName', title: '字段名称', width:50,height:20, editor: {
type:'textbox',//文本框为text
options: {
required: true, //是必填项
validType: 'english'//验证方式,english为自定义验证
},
}
},
{field:'fieldIntroduce',title:'字段简介',width:50,height:20,
editor: {
type: 'textbox',
options: {
required: true,
validType: 'isEmpty'//验证不为空
},
}
},
{field:'weight',title:'权重' ,width:50,height:20,
editor: {
type: 'numberbox',//文本框为数字
options: {
required: true,
validType: 'isEmpty'
},
}
}
]],
toolbar: '#tb',
});
给工具条中添加、删除、保存绑定监听调用
$("#tb a").unbind().click(function () {
var btn = $(this).attr("iconCls");
switch (btn) {
case "icon-add":
append();
break;
case "icon-remove":
remove();
break;
case "icon-save":
accept();
break;
}
});
添加事件
//新增时调用
function append(){
if (endEditing()){
$('#addRule').datagrid('appendRow',{weight:1});//添加一行数据,设置默认权重为1
editIndex = $('#addRule').datagrid('getRows').length-1;
$('#addRule').datagrid('selectRow', editIndex)
.datagrid('beginEdit', editIndex);
}
}
删除事件
//删除时调用
function remove(){
if (editIndex == undefined){return}
$('#addRule').datagrid('cancelEdit', editIndex)
.datagrid('deleteRow', editIndex);
editIndex = undefined;
}
保存事件
function accept(){
if (endEditing()){
if ($("#addRule").datagrid('getChanges').length) {
var row = $('#grid').datagrid("getSelected");
var addRuleRows = $("#addRule").datagrid('getRows');//获得表格所有数据
$.post("save",{rows:JSON.stringify(addRuleRows),type:row.value},function(result){
var flag = config.executeResult(result);
if(flag){
config.alert("保存成功")
$("#addRule").datagrid("reload");
}
},'json')
}
}
}
后台获取行编辑中所有数据,通过fastjson将json串转换为对应的实体对象
@PostMapping("/save")
public String findAllMatchType(@RequestParam("rows") String rows, @RequestParam("type") Integer type) {
String matchStr = rows.replaceAll(""","\\\"");//替换json传参中转义字符
List<Match> matches= JSONObject.parseArray(matchStr,Match.class);//将json串转换为实体类
return "成功";
}
自定义验证。更多验证规则参考:https://www.cnblogs.com/lansy/p/4627649.html
$.extend($.fn.validatebox.defaults.rules, {
english: {// 验证英语
validator: function (value) {
return /^[A-Za-z]+$/i.test(value);
},
message: '请输入英文字母'
}
})