1. 程式人生 > >利用easyui實現對錶格的行編輯,增加行和修改行

利用easyui實現對錶格的行編輯,增加行和修改行

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>
<thdata-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實現編輯增加改行

JSP頁面程式碼: <table id="dg" class="easyui-datagrid" title="Row Editing in DataGrid"style="width: 700px; height: auto"data-options="      

HTML變色

js版: <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

easyui 雙擊啟動編輯 及 儲存 撤銷 的實現

當前程式碼實現在webgate 專案中, webgate 專案地址:https://github.com/Wenhaoran/webgate  DataGrid 中,使用的 事件,方法,均可檢視 easyui API  1、在所有需要啟動編輯的列,加上 editor,可檢

php如何利用python實現pdf文件的操作(讀寫、合並分割)

PHP實現pdf文件截取 PHP調用python腳本 php如何利用python實現對pdf文件的操作 需求:在PHP裏實現了把8.pdf的前4頁pdf文件截取出來生成新的pdf文件。 詳細步驟如下: 1. 安裝python第三方庫PyPDF2 前提:python必須是3.x版本以上,必要時需要升級p

利用cookies實現彈出窗口頻率的控制

return box str ear ont time .com 代碼 idt 原理:當用戶第一次訪問網站時候,此時沒有設置cookies參數,並且設置過期,彈出顯示對話框,彈完之後,設置cookies參數”popped=yes;expires=”+date.toGMTSt

利用java實現文字的去除停用詞以及分詞處理

功能: 對txt文件進行分詞處理,並去除停用詞。 工具: IDEA,java,hankcs.hanlp.seg.common.Term等庫。 程式: import java.util.*; import java.io.*; import java.lang.String; imp

利用JUnit實現hadoop中javaAPI的測試

package gorilla.test; import java.io.FileInputStream; import java.io.FileNotFoundException; import java.io.FileOutputStream; import java.io.IOExc

PHP如何利用Python實現PDF檔案的操作

需求:在PHP裡實現了把8.pdf的前4頁pdf檔案截取出來生成新的pdf檔案。 詳細步驟如下: 前提:python必須是3.x版本以上,必要時需要升級pip3,命令如下:pip3 install --upgrade pipPyPDF 自 2010年 12月開始就不在更新了,PyPDF2 接棒 PyPD

java匯入excle表格並且進行相應的修改資料進行整理最後匯出本地表格等一系列操作

1.首先建立一個java專案 2.匯入以下jar包 3.程式碼如下   public class auto_date { private static List<List<String>> readExcel(File file) throws Exception

jQuery的應用

jQuery對錶格的應用 一、表格變色 <table> <thead> <tr><th>姓名</th><th>性別</th><th>暫住地</th&

C#利用Dapper實現SQLite的操作

前言 近幾天藉助C#對SQLite的學習,算是對資料庫剛入門吧,三天前寫了一篇C#利用System.Data.SQLite實現對SQLite的操作,其中方法是基於System.Data.SQLite.dll的程式包,後來在youtube和infoworld上看到利用Dapper程式包對資

純JavaScript寫一個的簡單增刪改查操作

功能:     新增表格資料,   修改表格資料,  刪除表格資料。 不完善區:  刪除資料之後序號沒有做處理 ,表單驗證簡單的提示警告, 沒有文字提醒。 介面: 線上檢視 下面是程式碼:

點選表格td 實現某個單元編輯

html (elementUi中的表格,傳入位置和當前值) methods(生成input,將當前輸入的value值等於當前單元格的值) handleChangeCorrectValue(index, data) { var target = event.target,

java匯入excle表格並且進行相應的修改資料進行整理最後匯出本地表格等一系列

1.首先建立一個java專案   完成效果如下圖所示 2.匯入以下jar包 3.程式碼如下   其中行和列的操作是根據需求自動劃分的 複製程式碼1 public class auto_date {2 private static List<List<String>> read

【java HanNLP】HanNLP 利用java實現文字的去除停用詞以及分詞處理

HanNLP 功能很強大,利用它去停用詞,加入使用者自定義詞庫,中文分詞等,計算分詞後去重的個數、 maven pom.xml 匯入 <dependency> <groupId>com.hankcs</g

使用sql語句建立表實現的修改操作

>需求:    a. 在test資料庫中建立person表,其結構如表1所示。    b. 將表名稱修改為tb_person。    c. 刪除出生日期欄位。    d. 添加出生日期欄位,資料型別為DATE型別。    e. 修改number欄位為id,型別改為BIG

Python的資料進行處理然後在Excel中製作柱形圖

# -*- coding: utf-8 -*- import sys reload(sys) sys.setdefaultencoding('utf8') from matplotlib.font_manager import FontProperties import

利用Django實現一個部落(附全部原始碼)

不論什麼語言,學Web開發必做的專案——個人部落格。 本次專案基於Python的知名Web框架Django,從資料庫到檢視邏輯、再到模板語法,完整的走了一遍MTV開發流程。 markdown非常適合寫部落格、新聞類文章,也快成為了開發者寫開發文件的標配了。所

pandas——groupby、agg資料分組與統計

文章目錄 DataFrame 分組,並對分組進行迭代 1. 按key1(一個列)分組,其實是按key1的值 2. 按[key1, key2](多個列)分組 3. 按函式分組 4. 按字典分組

SQL 進行按日期分組

在資料庫裡,有一張表名為 tb_name 裡,有一個叫 resultDate 的欄位,此欄位裡存的是日期+時間 型別的,現在這欄位裡面有如下的資料: 2011-11-30 14:54:16 2011-11-30 15:06:21 2011-11-30 15:45:21