jqgrid編輯在表格裏面新增和編輯例子

時間 2019-12-07

標籤 jqgrid 編輯表格裏面新增例子简体版

原文原文鏈接

var grid_selector = "#grid-table"; var pager_selector = "#grid-pager";javascript

//員工計劃價值觀id var hrEffPfmcePlaneecptId = "";css

//表格操做新增的數量 var newcount = 0;html

var leaderName = ""; //直接上級的名稱前端

var rowidNew = ""; //新增的 id var editRowid = ""; //存放在編輯當前行以前的編輯的行idjava

var totalWeight = 0; //總權重和 var totalWeightAdd = 0; var editWeight = "0"; //當前編輯的行的修改以前的權重。json

function isUpdateFunction() { var isUpdateFlag = $('#isUpdateFlag').val(); var flag = true; if (isUpdateFlag == "false") { flag = false; } return flag; }服務器

$(function() {網絡

// 獲取員工計劃價值觀id
hrEffPfmcePlaneecptId = $("#hepPlaneecptid").text();

//初始會 列表數據
listData();

//表單- 返回
$("#prevBtn").click(function() {
    cleanForm("hrEffPfmcePlaneeSaveForm"); //清空表單
    $("#editFormDiv").hide();
    $("#girdContentDiv").show();
    //移除 對提交按鈕的 隱藏
    $("#submitBtn").removeClass("hide");
    $("#resetBtn").removeClass("hide");
});

//表格操做撤銷
$("#resetBtn").click(function() {

    jbAlertInfoCallBack('舒適提示', '撤銷當前編輯記錄嗎', function() {

        var id = $(grid_selector).jqGrid('getGridParam', 'selrow');
        if (id) {
            //若是是新增的話，就刪除。
            if (id.indexOf("new") >= 0) {
                //根據rowid刪除行，但不會從服務器端刪除數據
                jQuery(grid_selector).jqGrid("delRowData", id);
                rowidNew = ""; //表格已被刷新，重置新增id

                return;
            } else {
                if (editRowid) {
                    //若是是編輯的話就撤銷編輯歷史。
                    $(grid_selector).jqGrid('restoreRow', editRowid);
                    editRowid = "";
                }

            }


        }


    });

});

//顯示上級在按鈕上
if (leaderName) {
    $("#saveNowBtn").html("<i class='icon-ok '></i>提交上級(" + leaderName + ")審批");
}

});ide

function listData() { jQuery(grid_selector).jqGrid({ url: _ctxPath + '/pfmcePlan/hrEffPfmcePlanee/achievementsTargetlistData.do?' + 'hrEffPfmcePlaneecptId=' + hrEffPfmcePlaneecptId, datatype: "json", mtype: 'POST', height: 500,post

colNames: ['主鍵', '類別', '工做目標', '描述', '權重(%)',
        '完成時間', '狀態', '操做', '上級名稱', '員工計劃價值觀id'
    ],
    colModel: [

        { name: 'id', width: 100, hidden: true },
        // sortable: false 不能夠排序，即點擊不會出現排序圖標選擇的。 
        { name: 'type', width: 75, sortable: false, editable: true, edittype: "select", formatter: typeFmatter, editoptions: { value: "1:OKR;2:重點工做" } },
        //  editable: true 可編輯，即在單元格里面編輯。
        // 爲列加上css樣式 classes: 'form-control' 所以不要亂加，儘可能不要加上，搞很差很影響的列表顯示的。
        { name: 'title', width: 140, editable: true, sortable: false, edittype: "textarea", editrules: { required: true } },
        { name: 'workContent', width: 310, editable: true, sortable: false, edittype: "textarea", editrules: { required: true } },

        // 評估標準
        //{ name: 'goal', width: 120, editable: true, sortable: false, edittype: "textarea", editrules: { required: true } },
        { name: 'weight', width: 55, editable: true, sortable: false, editrules: { required: true, integer: true, minValue: 0, maxValue: 100 }, editoptions: { placeholder: "0到100" }, formatter: weightFormatter },
        { name: 'planEtime', width: 80, editable: true, sortable: false, edittype: "text", editrules: { required: true }, editoptions: { readonly: "true", placeholder: "點擊時間", onFocus: "WdatePicker({lang:'zh-cn',dateFmt:'yyyy-MM-dd'})" } },
        { name: 'processStatus', width: 80, formatter: processStatusFormatter, sortable: false },

        { name: 'act', width: 40, sortable: false, hidden: true, formatter: actFormatter },
        //直接上級名稱
        { name: 'creator', width: 70, sortable: false, hidden: true, formatter: leaderNameFormatter },

        { name: 'hrEffPfmcePlaneecptId', width: 100, formatter: findPlaneecptIdFmatter, hidden: true }


    ],
    viewrecords: true,
    rowNum: 20,
    rowList: [10, 20, 30],
    pager: pager_selector,
    altRows: true,
    // rownumbers: true, //顯示 行的數字
    multiselect: false, //true 爲checkbox框，
    multiboxonly: true,
    autowidth: true,

    //須要再須要編輯的單元格里面加上： editable: true, 
    // 編輯後就能夠發送請求更新了,是單個單元格的更新的，不是批量，若是要批量就是 全列編輯了。
    //cellEdit: true, //啓用單元格編輯功能，

    //列編輯的提交地址，這裏彷佛不要這樣能夠，使用自定義。
    editurl: _ctxPath + "/pfmcePlan/hrEffPfmcePlanee/save.do",

    loadComplete: function() {
        rowidNew = ""; //表格已被刷新，重置新增id
        editRowid = "";
        //初始化權重總和
        totalWeight = totalWeightAdd;
        totalWeightAdd = 0;

        var table = this;
        setTimeout(function() {
            updatePagerIcons(table);
            enableTooltips(table);
        }, 100);
    },
    ondblClickRow: function() {
        editRow();
    },
    beforeSelectRow: function(rowid, e) {

        if (rowidNew) {
            //新增，固定選擇中 當前新增的記錄。
            $(grid_selector).jqGrid('setSelection', rowidNew);
            //不選擇該行。
            return false;
        }

        return true;
    }
});


function typeFmatter(cellvalue) {
    var str = "";
    if (cellvalue == "1") {
        str = "<span class='badge badge-info'>OKR</span>";
        return str;
    } else if (cellvalue == "2") {
        str = "<span class='badge badge-success'>重點工做</span>";
        return str;
    } else {
        return cellvalue;
    }

}

//獲取一行的 員工計劃價值觀id 
function findPlaneecptIdFmatter(cellvalue) {

    if (hrEffPfmcePlaneecptId) {

        return cellvalue + "";
    } else {

        hrEffPfmcePlaneecptId = cellvalue;
        return hrEffPfmcePlaneecptId + "";
    }

}

//操做保存
function actFormatter(cellvalue, options, rowObject) {
    var rowid = "";
    rowid = options.rowId;

    var str = "";
    str = "<a  class='btn btn-link' role='button'  href='javascript:void(0);' onclick='saveGridRow(\"" + rowid + "\")' > 保存 </a>";

    //若是過期或者是 已提交了，就不該該顯示操做按鈕。
    return str;

}

//上級名稱
function leaderNameFormatter(cellvalue) {

    if (!leaderName) {

        if (cellvalue) {
            leaderName = cellvalue;
            $("#saveNowBtn").html("<i class='icon-ok '></i>提交上級(" + leaderName + ")審批");
        }
    }

    return leaderName;
}

//計算權重總和
function weightFormatter(cellvalue) {
    var str = "";
    if (cellvalue) {
        str = cellvalue;
        totalWeightAdd = totalWeightAdd + Math.round(str);

    }

    return str;
}



//按鈕菜單
jQuery(grid_selector).jqGrid('navGrid', pager_selector, { //navbar options
    edit: isUpdateFunction(),
    editicon: 'fa fa-pencil  blue',
    add: isUpdateFunction(),
    addicon: 'fa fa-plus purple',
    del: isUpdateFunction(),
    delicon: 'fa fa-trash red',
    search: false,
    searchicon: 'fa fa-search-plus orange',
    refresh: true,
    refreshicon: 'fa fa-refresh green',
    view: false,
    viewicon: 'icon-zoom-in grey',
    addfunc: addRow,
    delfunc: deleteRows,
    editfunc: editRow,

});

}

//新增 function addRow() {

if (rowidNew) {
    showNotice('已有新增，請先保存或者刪除新增的數據');
    //選擇到新增的行。
    $(grid_selector).jqGrid('setSelection', rowidNew);
    return;
}
//表格操做新增。
actAddRow();

}

//表格裏面操做新增 function actAddRow() {

var rowid = "new" + newcount;
var dataRow = {
    id: rowid,
    //type: "",
    // title: "",
    // workContent: "",
    // goal: "",
    // weight: "",
    // planEtime: "",

    processStatus: "new",
    //hrEffPfmcePlaneecptId: ""
};
// last 在表格最後一列的下面新增。
jQuery(grid_selector).jqGrid("addRowData", rowid, dataRow, "last");

//setRowData(rowid);

//添加後，進行編輯
jQuery(grid_selector).jqGrid('editRow', rowid);
rowidNew = rowid;
//選擇該行數據。
$(grid_selector).jqGrid('setSelection', rowidNew);
if (editRowid) {
    //說明以前有編輯其餘行的歷史,撤銷以前的編輯狀態。
    $(grid_selector).jqGrid('restoreRow', editRowid);
    //更新當前的編輯歷史。
    editRowid = "";
}
newcount++;

}

function setRowData(rowid) { // 新增行的數據 jQuery(grid_selector).jqGrid('setRowData', rowid, {

type: '<select  class="form-field" id="type_' + rowid + '" ><option value="1">OKR</option><option value="2">重點工做</option></select>',
    title: '<textarea class="form-field  " id="title_' + rowid + '"  rows="3" maxlength="480"  style="width:100%; "   >' + ' </textarea>',
    workContent: '<textarea class="form-field  " id="workContent_' + rowid + '"  rows="3" maxlength="480"  style="width:100%; "   >' + ' </textarea>',
    // goal: '<textarea class="form-field  " id="goal_' + rowid + '"  rows="3" maxlength="480"  style="width:100%; "   >' + ' </textarea>',
    planEtime: '<input type="text"  class="wdateTime form-field " onFocus="WdatePicker({lang:' + "'zh-cn'" + ',dateFmt:' + "'yyyy-MM-dd'" + '})" placeholder="請填寫"   id="planEtimeString_' + rowid + '" readonly />',
    weight: '<input type="text"  class=" form-field "  placeholder=" 0到100數字"   id="weight_' + rowid + '"  />',

});

}

//表格裏面保存該行表格裏面的數據。 function saveGridRow(rowid) {

var rowOneData = $(grid_selector).jqGrid('getRowData', rowid);
var type = $("#" + rowid + "_type").val();
if (!type) {
    showNotice("類別不能爲空");
    return;
}

var idnew = "";
if (rowid.indexOf("new") >= 0) {
    idnew = ""; //新增,會替換原來的向後臺提交的id內容的
} else {
    idnew = rowid;
}

//會覆蓋原來的設置的地址的
var editurl = _ctxPath + "/pfmcePlan/hrEffPfmcePlanee/save.do";
var extraparam = { id: idnew, hrEffPfmcePlaneecptId: hrEffPfmcePlaneecptId };
jQuery(grid_selector).jqGrid('saveRow', rowid, saveCallbackGrid, editurl, extraparam);

}

function save() {

var notOnTime = $("#notOnTime").text();
if (notOnTime) {
    //不能填報
    showNotice("績效工做未展開，或已過時");
    return;
}

var rowid = $(grid_selector).jqGrid('getGridParam', 'selrow');
if (!rowid) {
    showNotice("請選擇行");
    return;
}

if (rowid.indexOf("new") >= 0) {
    // rowid = ""; //新增,會替換原來的向後臺提交的id內容的
} else {
    //編輯的  更新。
    if (editRowid) {
        rowid = editRowid;
    } else {
        showNotice("請選擇須要編輯的行");
        return;
    }

}

var type = $("#" + rowid + "_type").val();
if (!type) {
    showNotice("類別:不能爲空");
    return;
}
var title = $("#" + rowid + "_title").val();
if (!title) {
    showNotice("工做目標:不能爲空");
    return;
}
var workContent = $("#" + rowid + "_workContent").val();
if (!workContent) {
    showNotice("描述:不能爲空");
    return;
}
var planEtime = $("#" + rowid + "_planEtime").val();
if (!planEtime) {
    showNotice("完成時間:不能爲空");
    return;
}
var weight = $("#" + rowid + "_weight").val();
if (weight) {
    if ((!isNaN(weight)) && (weight >= 0 && weight <= 100)) {
        if (Math.floor(weight) != weight) {
            showNotice("權重:整數且0到100之間");
            return;
        }
    } else {
        showNotice("權重:整數且0到100之間");
        return;
    }
} else {
    showNotice("權重不能爲空,整數且0到100之間");
    return;
}

if (rowid.indexOf("new") >= 0) {
    rowid = ""; //新增,會替換原來的向後臺提交的id內容的
    var totalWeightsave = totalWeight + Math.round(weight);
    if (totalWeightsave > 100) {
        showNotice("權重:總和不能超過100%");
        return;
    }
} else {
    //編輯的 檢驗權重和 editWeight
    var totalWeightedit = totalWeight + Math.round(weight) - Math.round(editWeight);

    if (totalWeightedit > 100) {
        showNotice("權重:總和不能超過100%");
        return;
    }
}

setBtnStatus(false, "saveNowBtn"); //爲了防止重複提交的
setBtnStatus(false, "submitBtn"); //保存也禁用
setBtnStatus(false, "resetBtn");

var url = _ctxPath + "/pfmcePlan/hrEffPfmcePlanee/save.do";
loadDataTip();
$.post(url, {
    id: rowid,
    type: type,
    title: title,
    workContent: workContent,
    planEtimeString: planEtime,
    weight: weight,
    hrEffPfmcePlaneecptId: hrEffPfmcePlaneecptId
}, function(result) {
    removeLoadDataTip();

    if (result.success) {

        showNotice("保存成功");

        setBtnStatus(true, "saveNowBtn");
        setBtnStatus(true, "submitBtn");
        setBtnStatus(true, "resetBtn");
        if (hrEffPfmcePlaneecptId) {
            setTimeout(function() {
                //刷新 數據
                $(grid_selector).trigger("reloadGrid");

            }, 200); //0.5秒後 刷新

        } else {

            hrEffPfmcePlaneecptId = result.object;

            setTimeout(function() {
                //刷新 數據
                window.location.reload();

            }, 200); //0.5秒後 刷新
        }


    } else {

        showError(result.message);
        setBtnStatus(true, "saveNowBtn");
        setBtnStatus(true, "submitBtn");
        setBtnStatus(true, "resetBtn");
    }


}, "json").error(function() {
    removeLoadDataTip();
    showError("網絡錯誤");
    setBtnStatus(true, "saveNowBtn");
    setBtnStatus(true, "submitBtn");
    setBtnStatus(true, "resetBtn");
});

}

//提交審覈 function saveNow() { // 提交審覈

var notOnTime = $("#notOnTime").text();
if (notOnTime) {
    //不能填報
    showNotice("績效工做未展開，或已過時");
    return;
}


if (hrEffPfmcePlaneecptId) {

} else {
    showNotice("請先保存");
    return;
}

if (totalWeight != 100) {
    showNotice("權重總和不是100%，不能提交！,請先進行編輯保存");
    return;
}

jbAlertInfoCallBack('舒適提示', '提交後將不能修改，肯定提交嗎', function() {

    setBtnStatus(false, "saveNowBtn"); //爲了防止重複提交的
    setBtnStatus(false, "submitBtn"); //保存也禁用
    setBtnStatus(false, "resetBtn");


    var url = _ctxPath + "/pfmcePlan/hrEffPfmcePlanee/saveNow.do";
    loadDataTip();
    $.post(url, { hrEffPfmcePlaneecptId: hrEffPfmcePlaneecptId }, function(data) {
        removeLoadDataTip();

        if (data.success) {
            showNotice("提交審覈成功");

            setTimeout(function() {
                //刷新 數據
                window.location.href = _ctxPath + "/index.do";

            }, 200); //0.5秒後 刷新


        } else {
            if (data.code == 1) {
                showError("權重總和不是100%，不能提交！");
                setBtnStatus(true, "saveNowBtn");
                setBtnStatus(true, "submitBtn");
                setBtnStatus(true, "resetBtn");
            } else {
                showError("提交失敗,不能重複提交或者數據不能爲空");
                setBtnStatus(true, "saveNowBtn");
                setBtnStatus(true, "submitBtn");
                setBtnStatus(true, "resetBtn");
            }

        }


    }, "json").error(function() {
        removeLoadDataTip();
        showError("網絡錯誤");
        setBtnStatus(true, "saveNowBtn");
        setBtnStatus(true, "submitBtn");
        setBtnStatus(true, "resetBtn");
    });

});

}

//表格操做保存調。 function saveCallbackGrid(data) { var result; if (data.responseText) {

var resultString = data.responseText;
    //string 轉json 
    result = JSON.parse(resultString);

} else {
    result = data;
}


removeLoadDataTip();
if (result.success) {

    showNotice("保存成功");

    setBtnStatus(true, "submitBtn");
    if (hrEffPfmcePlaneecptId) {
        setTimeout(function() {
            //刷新 數據

            $(grid_selector).trigger("reloadGrid");

        }, 200); //0.5秒後 刷新

    } else {

        hrEffPfmcePlaneecptId = result.object;

        setTimeout(function() {
            //刷新 數據
            window.location.reload();

        }, 200); //0.5秒後 刷新
    }


} else {

    showError("保存失敗");
    setBtnStatus(true, "submitBtn");
}

}

//編輯 function editRow() { var id = $(grid_selector).jqGrid('getGridParam', 'selrow');

if (rowidNew) {
    showNotice('已有新增，請先保存或者刪除新增的數據');
    //選擇到新增的行。
    $(grid_selector).jqGrid('setSelection', rowidNew);
    return;
}

if (editRowid) {
    //說明以前有編輯其餘行的歷史,撤銷以前的編輯狀態。
    $(grid_selector).jqGrid('restoreRow', editRowid);
    //更新當前的編輯歷史。
    editRowid = id;
} else {
    editRowid = id;
}

//編輯以前的歷史數據
var rowOneData = $(grid_selector).jqGrid('getRowData', id);
var typeStr = "";
typeStr = rowOneData.type;
editWeight = rowOneData.weight;

var type = "";
if (typeStr) {
    if (typeStr.indexOf("OKR") >= 0) {
        type = "1";
    } else if (typeStr.indexOf("重點工做") >= 0) {
        type = "2";
    }
}



//全列可編輯的編輯
jQuery(grid_selector).jqGrid('editRow', id);
//顯示以前選好的select 

if (type) {
    //獲取編輯的 select的 id 進行選擇。
    $("#" + id + "_type").val(type + "");
}

}

//刪除 function deleteRows() { delConfirm(function() { var id = $(grid_selector).jqGrid('getGridParam', 'selrow');

//若是是新增的行，刪除的話，就不會向服務器端發送刪除數據的。
    if (id.indexOf("new") >= 0) {
        //根據rowid刪除行，但不會從服務器端刪除數據
        jQuery(grid_selector).jqGrid("delRowData", id);
        rowidNew = ""; //重置新增id
        editRowid = "";
        return;
    }

    var deletePostUrl = _ctxPath + "/pfmcePlan/hrEffPfmcePlanee/delete.do";
    $.post(deletePostUrl, { id: id.toString() }, function(data) {
            if (data.success) {
                showNotice("刪除成功");
                setTimeout(function() {
                    setBtnStatus(true, "submitBtn");
                    $("#editFormDiv").hide();
                    $("#girdContentDiv").show();
                    $(grid_selector).trigger("reloadGrid");
                }, 500); //0.5秒後 刷新
                cleanForm("hrEffPfmcePlaneeSaveForm");
            } else {
                showError("刪除失敗");
            }
        }, "json")
        .error(function() {
            showError("網絡錯誤");
        });
});

}

前端：