zoukankan      html  css  js  c++  java
  • jqgrid 单击行启用行编辑,切换行保存原编辑行

    为了加速表格互动编辑,我们往往希望通过选中行就触发了行编辑,完成行编辑后,再选中另一个行做编辑,同时上一个编辑行被自动保存,直至完成需要的编辑内容。

    页面效果可能如下:


    1)设置需要编辑的列 editable: true  参考如下:

     colModel: [
                { label: '字段编码', name: 'FieldCode', key: true,  180, editable: false },
                 {
                     label: '字段名称',
                     name: 'FieldName',
                      150,
                     editable: true,
                     edittype: "text",
                     editrules: { required: true }
                 },
                  {
                      label: '字段类型',
                      name: 'DataType',
                       10,
                      hidden: true,
                      editable: true,
                  },
                  {
                      label: '是否排序',
                      name: 'IsOrder',
                       80,
                      editable: true,
                      edittype: "select",
                      editoptions: {
                          //value: "true:是;false:否"
                          value: "true:true;false:false"
                      }
                  },
                   {
                       label: '列宽',
                       name: 'Width',
                        55,
                       editable: true,
                       editrules: { required: true, integer: true },
                       edittype: "text"
                   }]
    View Code

    2)使用 onSelectRow 选中行事件

        $("#fieldGrid").jqGrid({
            ...
            onSelectRow: EditSelectRow,
            pager: "#fieldGridPager",
            ...
        });
    View Code

    3)编写行选中的自定义方法 EditSelectRow

    //选中行启用行编辑
    function EditSelectRow(id)
    {
        //原选中行ID
        var oldSelectRowId = $("#selectRowId").val();
        if (oldSelectRowId != null && oldSelectRowId != "" && oldSelectRowId.length > 0) {
            $("#fieldGrid").jqGrid('saveRow', oldSelectRowId);//保存上一行
        }
    
        //当前选中行
        $("#selectRowId").val(id);//临时存储当前选中行
        //$("#fieldGrid").jqGrid('editRow', id);
        $("#fieldGrid").jqGrid('editRow', id, { keys: true, focusField: 1 });
    }
    View Code

    需要特别注意:不能同时支持内置行编辑行事件触发的行编辑。会产生行结束编辑的干扰项,比较坑,请绕开。若要使用行编辑请分别采用以下某一种方式

    jqgrid 单击行启用行编辑,切换行保存原编辑行

    jqgrid 使用自带的行编辑

    jqgrid 选中行触发编辑,切换下一行时验证和异步保存上一行数据

  • 相关阅读:
    js yui
    ie tbody table 兼容方法
    js json ie不支持json
    js ie 6,7,8 使用不了 firstElementChild
    js for in
    js json 单双引号互换
    html table 上移下移
    js autoComplate
    开发总结
    CentOS6.7 下安装git
  • 原文地址:https://www.cnblogs.com/senyier/p/7364229.html
Copyright © 2011-2022 走看看