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("网络错误");
        });
});

}

前端：