利用easyui实现对表格的行编辑,增加行和修改行

来源:互联网 发布:em算法再次 编辑:程序博客网 时间:2024/06/08 11:02

JSP页面代码:

<table id="dg" class="easyui-datagrid" title="Row Editing in DataGrid"
style="width: 700px; height: auto"
data-options="
                iconCls: 'icon-edit',
                singleSelect: true,
                toolbar: '#tb',
                url: '../../employee/assessCategory-retrieve.action',
                method: 'get',
                onClickRow: onClickRow
            ">
<thead>
<tr>
   <th data-options="field:'id',width:130,align:'left',hidden:'hidden'">ID</th>
<th data-options="field:'name',width:130,align:'left',editor:'text'">类目名称</th>
<th data-options="field:'description',width:130,align:'left',editor:'text'">类目描述</th>
<th data-options="field:'isActive',width:100,
                        editor:{
                            type:'combobox',
                            options:{
                                data:[{
                                   text: '有效',
                                   value: 'true'
                                },{
                                   text: '无效',
                                   value: 'false'
                                }],                                
                                textField:'text',
                                valueField:'value',
                                panelHeight:'auto',
                   editable: true                               
                            }
                        }">是否有效</th>
</tr>
</thead>
</table>


<div id="tb" style="height: auto">
<a href="javascript:void(0)" class="easyui-linkbutton"
data-options="iconCls:'icon-add',plain:true" onclick="add()">Add</a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" onclick="saveAllData()">Save</a>
<a href="javascript:void(0)" class="easyui-linkbutton"
data-options="iconCls:'icon-undo',plain:true" onclick="reject()">ReSet</a>
</div>

JS代码:

<script type="text/javascript">
var editIndex = undefined;
function endEditing() {
if (editIndex == undefined) {
return true;
}
if ($('#dg').datagrid('validateRow', editIndex)) {
var ed = $('#dg').datagrid('getEditor', {
index : editIndex,
field : 'isActive'
});
var text = $(ed.target).combobox('getText');
//这行代码的作用就是为了避免在页面显示isActive出现显示boolean类型的值
$(ed.target).combobox('setValue',text);
$('#dg').datagrid('getRows')[editIndex]['text'] = text;
$('#dg').datagrid('endEdit', editIndex);
editIndex = undefined;
return true;
} else {
return false;
}
}
function onClickRow(index) {
if (editIndex != index) {
if (endEditing()) {
$('#dg').datagrid('selectRow', index).datagrid('beginEdit',
index);
editIndex = index;
} else {
$('#dg').datagrid('selectRow', editIndex);
}
}
}
function add() {
if (endEditing()) {
$('#dg').datagrid('appendRow', {
isActive : 'true'
});
editIndex = $('#dg').datagrid('getRows').length - 1;
$('#dg').datagrid('selectRow', editIndex).datagrid('beginEdit',
editIndex);
}
}
function reject() {
$('#dg').datagrid('rejectChanges');
editIndex = undefined;
}
function saveAllData(){
if(endEditing()){
if($('#dg').datagrid('getChanges').length){
var inserted = $('#dg').datagrid('getChanges','inserted');
var updated = $('#dg').datagrid('getChanges','updated');
var effectRow = new Object();
if(inserted.length){
effectRow['inserted'] = JSON.stringify(inserted);
}
if(updated.length){
   effectRow['updated'] = JSON.stringify(updated);
}

var rows = $('#dg').datagrid('getChanges');
if(rows.length < 1){
alert("没有数据产生修改!");
return;
}
var mustName;
var mustDescription;
var mustIsActive;
if(rows.length > 0){
for(var i=0;i<rows.length;i++){
mustName = rows[i].name;
mustDescription = rows[i].description;
mustIsActive = rows[i].isActive;
if(mustName == "" || mustName == null || mustDescription == "" || mustDescription == null || mustIsActive == ""){
alert("数据不能为空,请核对");
return;
}
}
}

var data1 = new Object();
data1.array = rows;

var jsonObject = JSON.stringify(data1);
$.post("../../employee/assessCategory-saveOrUpdate.action",{action:"post",jsonObject:""+jsonObject+""},function(data){
if(data = "true"){
  alert("保存成功!");
  $('#dg').datagrid('reload');
}else{
alert("保存失败,请重新操作!");
}
},"json");
}
}
}
</script>

后台程序:

public int saveOrUpdate(int assessId, String jsonObject) {
int result = 0;
AssessCategory assessCategoryOriginal = null;
AssessCategory assessCategory = new AssessCategory();
int id = 0;
String name = null;
String description = null;
String isActive = null;
// 对JS中传过来的有过改变的数据做处理
for (String str : jsonObject.substring(10, jsonObject.length() - 2)
.split("},")) {
   if (str.indexOf("}") == -1) {
str += "}";
   }
   for (String subStr : str.split(",")) {
if (subStr.indexOf("id") != -1) {
   id = Integer
   .parseInt(subStr.substring(subStr.indexOf(":") + 1));
}
if (subStr.indexOf("name") != -1) {
   name = subStr.substring(subStr.indexOf(":") + 2,subStr.lastIndexOf("\""));
}
if (subStr.indexOf("description") != -1) {
   description = subStr.substring(subStr.indexOf(":") + 2,subStr.lastIndexOf("\""));
}
if (subStr.indexOf("isActive") != -1) {
   isActive = subStr.substring(subStr.indexOf(":") + 2,subStr.lastIndexOf("\""));
}
   }
   assessCategoryOriginal = assessCategoryDAO.findById(id);
   if (assessCategoryOriginal != null) {
try {
                    createInstance(assessCategory,name,description,isActive,assessId);
   assessCategoryDAO.updateAssessCategory(
   assessCategoryOriginal, assessCategory);
   result = 1;
} catch (Exception e) {
   result = 0;
}
   } else if (assessCategoryOriginal == null) {
              try{
         createInstance(assessCategory,name,description,isActive,assessId);
         assessCategoryDAO.save(assessCategory);
         result = 1;
              }catch(Exception e){
         result = 0;
              }
   }


}
return result;
    }
    //通过解析JS传过来的数据,创建对象
    public void createInstance(AssessCategory assessCategory, String name,
   String description, String isActive,int assessId) {
assessCategory.setAssess(assessDAO.findById(assessId));
assessCategory.setName(name);
assessCategory.setDescription(description);
if ("无效".equals(isActive) || "false".equals(isActive)) {
   assessCategory.setIsActive(false);
} else if ("有效".equals(isActive) || "true".equals(isActive)) {
   assessCategory.setIsActive(true);
}
    }

因为通过JS传到后台的是个String类型,而对于取出每个属性的值,我采用的是对jsonObject分割,方法比较笨,如果有大神有比较好的思路,望留言告诉本人。3Q!

0 0
原创粉丝点击