利用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!
- 利用easyui实现对表格的行编辑,增加行和修改行
- JS实现可编辑的表格,双击可编辑,可以删除行和列,增加行和列,重置,导出表格,也可以上下移动元素
- jQuery EasyUI中对表格进行编辑的实现代码
- jQuery EasyUI中对表格进行编辑的实现代码
- jQuery EasyUI中对表格进行编辑的实现代码
- 实现对easyui-datagrid的数据行批量修改(包括修改内容和删除)
- easyui的自动分页表格以及行编辑模式edatagrid
- jquery-easyui中表格的行编辑功能
- 表格行的动态增加和删除的实现
- 可以增加和删除行的table(可以编辑表格中内容)
- easyui 数据表格行内编辑(编辑、保存、删除)
- jquery easyui实现datagrid表格向数据库中进行增加,修改和删除操作
- jquery 表格的增加删除和修改及设置奇偶行颜色
- jquery 表格的增加删除和修改及设置奇偶行颜色
- jquery 表格的增加删除和修改及设置奇偶行颜色
- jquery 表格的增加删除和修改及设置奇偶行颜色
- 利用javaScript动态增加表格行,删除表格行
- 利用javaScript动态增加表格行,删除表格行
- java执行批处理命令 获取返回 数据
- RT5350 gpio按键学习记录(602)
- Android4.4Phone的变化
- Win7 设置电脑保护色
- String.Format用法
- 利用easyui实现对表格的行编辑,增加行和修改行
- 算法训练 最小乘积(基本型)
- 复数类--重载运算符2+
- 个性化推荐算法 综述
- android 在listview中 不同的item现实不同的 布局
- DWZ富客户端框架使用
- 能够取代Linux命令行的4款GUI实用工具
- WIn7 磁盘分区工具试用记录
- 在SQL Server 2005里面把表移动到另外一个filegroup里(ZT,经翻译)