精华内容
下载资源
问答
  • 单击单元格,即可将其变为文本框,方便编辑测试
  • Day 8 双击单元格编辑

    2021-03-08 14:30:44
    返回目录 以下知识源码位置: [Git: ... ... 双击某个单元格进入编辑模式,具体效果如下: 0.基础知识: H5 CSS : .append() /.db...

    返回目录

     

    以下知识源码位置: [Git:  https://gitee.com/zhouweng/mini_sheet  version=055e060b7173c1d29923794698f2dac0e4dde069]

    源代码回滚版本,参考这里[ https://blog.csdn.net/u010593516/article/details/113767587 ]

     

    双击某个单元格进入编辑模式,具体效果如下:

     

    0.基础知识:

    H5 CSS : .append() / .dblclick() / .html() / .css() 

     

    1.修改文件:

    1)global/createdom.js: 在页面初始化阶段, body 通过 .append() 方法,追加了 inputHTML 内容,这部分在下面的constant.js中定义;

     

    2)controller/constant.js: 在body里面,定义了下面层次的HTML元素

    div id="luckysheet-input-box-index" 编辑后滚动跟随的单元格提示

      div id="luckysheet-input-box"

       div id="luckysheet-rich-text-editor"  单元格录入

     

    3)controller/handler.js: 在 #luckysheet-cell-main, #luckysheetTableContent 上面增加.dblclick(),双击的事务处理,通过location.js定位具体单元格位置,

      然后,调用 updateCell.luckysheetupdateCell() (下面会具体描述),把编辑的窗口浮现出来。

     

    2.新增文件:

    1)controller/updateCell.js: 当双击单元格区域的时候,会调用  updateCell.luckysheetupdateCell() ,这个方法有一点复杂,下面逐步进行分析:

      getColumnAndRowSize()函数的作用是处理单元格的尺寸, 生成 input_postition 和 inputContentScale 两个json参数,作为

     #luckysheet-input-box和#luckysheet-rich-text-editor的css样式,再通过valueShowEs() h获取对应单元格的值,通过.html()

     显示到 #luckysheet-rich-text-editor 里面。

     

    3.一个小彩蛋

      在拖动滚动条的时候,被编辑的单元格的左上角,会显示当前正在编辑的单元格的编号,效果如下:

     

    相关联的代码如下:

    1)updateCell.js Line53: 这里对元素进行赋值,并隐藏起来

       $("#luckysheet-input-box-index").html(chatatABC(col_index) + (row_index + 1)).hide();

    2)scroll.js Line 18-22: 这里设置元素的位置,并显示到页面上

        $("#luckysheet-input-box-index").css({

            "left": $("#luckysheet-input-box").css("left"),

            "top": (parseInt($("#luckysheet-input-box").css("top")) - 20) + "px",

            "z-index": $("#luckysheet-input-box").css("z-index")

        }).show();

    展开全文
  • js 实现 双击单元格变为可编辑! 值得下载看看!资源免费,大家分享!!
  • 要使bootstrap-table实现可编辑,需要配合使用x-editable插件。 先在页面上导入必要的css和js文件 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta ...
  • 下面是有两种双击单元格的情况,可以自行选择使用。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <...

    相信这个功能对于很多同学都是很简单的了,但是对于我这个自称全栈的同学来说,还是值得做个笔记的,方便以后直接copy代码。

    这里就直接放代码了

    下面是有两种双击单元格的情况,可以自行选择使用。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>JS实现双击table单元格变为可编辑状态</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <script type="text/javascript">
      function Show(element) {
        var oldhtml = element.innerHTML;
        if (oldhtml == null || oldhtml.length == 0) {
    	    return alert("不能为空!");
        }
    
        var newInput = document.createElement('input');
        newInput.type = 'text';
        newInput.value = oldhtml;
        newInput.onblur = function() {
          element.innerHTML = this.value == oldhtml ? oldhtml : this.value;
        }
        
        element.innerHTML = '';
        element.appendChild(newInput);
        newInput.setSelectionRange(0, oldhtml.length);
        newInput.focus();
      }
    </script>
    </head>
    <body>
    <table class="sui-table table-bordered">
    	<thead>
    	<tr>
       	 	<th width="20%">队列大小</th>
       	 	<th width="20%">速率</th>
        <tr>
        </thead>
        <tbody>
        <tr>
        	<td ondblclick="Show(this)"><span>111</span></td>
        	<td><span ondblclick="Show(this)">222</span></td>
        </tr>
        </tbody>
      </table>
    
    </body>
    </html>
    

    有借鉴网上的。

    展开全文
  • el_table双击单元格实现编辑操作 el-input回车操作enter与失焦事件blur冲突(会触发两次导致操作异常) 如果是组件之间操作,tableData是从父组件通过props接过来的,在本子页面中定义了另一个空数...

    浏览了很多智慧的结晶,要么操作傻瓜,要么过于复杂(不必要的),还有的虽然实现了操作,但逻辑上让我难受。所以自己实操成功后整合一篇。

    本篇博客涉及到的点有:(后面详解)

    1. el_table双击单元格实现编辑操作
    2. el-input回车操作enter与失焦事件blur冲突(会触发两次导致操作异常)
    3. 如果是组件之间操作,tableData是从父组件通过props接过来的,在本子页面中定义了另一个空数组赋值过来,需要增加this.tableData = [...this.tableData]操作,
    4. el-input的autofocus只有第一次触发,如何解决。

    思路是:给每一个需要可操作的单元格内容增加各自对应的标志位flag,通过变flag的值为true或false,判断显示文字内容或input内容。

    下面详解:

    第一步:从父组件接收表格内容(如果是单页面操作此步省略)

          props:{
            tab2list:Array,
          },

    第二步:data中定义一个空数组,准备赋值表格内容,页面绑定这个空数组(也可以直接绑定tab2list,那就省略这一步,后面所有的tableData替换为tab2list即可)

          data() {
            return {
              tableData:[],//用来展示
            };
          },

    第三步:编写代码。首先是template部分。

    <el-table
      max-height="650"
      :data="tableData"
      style="width: 100%">
      <el-table-column
        :show-overflow-tooltip="true"
        align="center"
        prop="enddate"
        label="日期"
        sortable
        width="250">
        <template slot-scope="scope">
          <div @dblclick="changeEnddate(scope.$index,scope.row)" style="height: 40px;line-height: 40px;">
            <span v-show="!scope.row.edit_enddate">{{scope.row.enddate}}</span>
            <!--:autofocus="true"-->
            <el-input :ref='"enddateinput"+scope.$index'
                      @blur="enddateblur(scope.$index,scope.row)"
                      @keyup.enter.native="$event.target.blur"
                      clearable
                      v-show="scope.row.edit_enddate"
                      size="mini"
                      v-model="scope.row.enddate"
                      placeholder="请输入内容"></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        :show-overflow-tooltip="true"
        align="center"
        label="数据"
        width="230">
        <template slot-scope="scope">
          <div @dblclick="changeValue(scope.$index,scope.row)" style="height: 40px;line-height: 40px;">
            <span v-show="!scope.row.edit_value">{{scope.row.value}}</span>
            <!--:autofocus="true"-->
            <el-input :ref='"valueinput"+scope.$index'
                      @blur="valueblur(scope.$index,scope.row)"
                      @keyup.enter.native="$event.target.blur"
                      clearable
                      v-show="scope.row.edit_value"
                      size="mini"
                      v-model="scope.row.value"
                      placeholder="请输入内容"></el-input>
          </div>
        </template>
      </el-table-column>
    </el-table>
    

    然后是各个方法。请注意注释。

    changeEnddate(index,rowdata){
      this.tableData[index].edit_enddate = !this.tableData[index].edit_enddate;//直接加key
      this.tableData = [...this.tableData];//因为我table绑定的表格数据是后接过来赋值的,所以需要这步操作,如果没有1、2步骤这个可以不加。后面也一样
    
      setTimeout( ()=> {//定时器是为了避免没有获取到dom的情况报错,所以象征性的给1毫秒让他缓冲
        this.$refs['enddateinput' + index].focus()
        //el-input的autofocus失效,所以用这个方法。对应在template里的refs绑定值
      }, 1)
    },
    enddateblur(index,rowdata){
      //enter方法和blur方法冲突的解决办法,就是在让他们触发同一个方法。具体看template里是怎么写的
      this.tableData[index].edit_enddate = !this.tableData[index].edit_enddate;
      this.tableData = [...this.tableData];
    },
    changeValue(index,rowdata){
      this.tableData[index].edit_value = !this.tableData[index].edit_value;
      this.tableData = [...this.tableData];
    
      setTimeout(() => {
        this.$refs['valueinput' + index].focus()
      }, 1)
    },
    valueblur(index,rowdata){
      this.tableData[index].edit_value = !this.tableData[index].edit_value;
      this.tableData = [...this.tableData];
    },

     

    注意:

    1、el-table有一个双击单元格的方法  cell-dblclick ,也可以通过这个方法进行单元格操作,如果不是所有的列都需要触发事件,可以通过column.label(列名)判断某一列是否触发,下面举例。

    editCell(row, column, cell, event){
         // console.log(row,'row');当前行的所有键值内容
         // console.log(column,'column');当前列的信息
         // console.log(cell,'cell');单元格信息
         // console.log(event,'event');事件信息
         //一般就用到前两个
    
         if(column.label == '用户'){
             row.edit_enddate = !row.edit_enddate;
         }
         if(column.label == '时间'){
             row.edit_value = !row.edit_value;
         }
    }

    2、这也是一种可以使el-table可以编辑的方案,极不推荐,纯原生操作,下面我说一下缺点。当然你想拿来练手我不拦你。

    • 操作沙雕。必须在光标在input框里再点击别的地方才能触发删除input框的blur方法,哪个用户会愿意这样操作?
    • 用户体验极差。多次双击会创建多个input框,还需要再给他添加flag值,如果已经有一个就不允许再添加了,麻烦。
    • 样式丑。通过双击事件可以新建原生input框,需自己写css样式,很难搞,尝试加类名但是失败了,只能一个个样式给,丑的一比。
            let columnContent = "";
              if(column.label == '时间'){
                columnContent = row.enddate;
              }
              if(column.label == '内容'){
                columnContent = row.value;
              }
    
              if (column.label != "") {
                event.target.innerHTML = "";
                let cellInput = document.createElement("input");
                cellInput.value = columnContent;
                cellInput.setAttribute("type", "text");
                cellInput.setAttribute("autofocus", "autofocus");
                // cellInput.classList.add("add-input");
                cellInput.style.width = "80%";
                cellInput.style.height = "35px";
                cellInput.style.outline = "none";
                cell.appendChild(cellInput);
                cellInput.onblur = ()=> {
                  cell.removeChild(cellInput);
                  event.target.innerHTML = cellInput.value;
                  // console.log(this.tableData,'tabledata');
                  this.$emit('editCell',this.tableData)
                  if(column.label == '时间'){
                    row.enddate = cellInput.value;
                  }
                  if(column.label == '内容'){
                    row.value = cellInput.value;
                  }
                };
              }

     

    有任何问题欢迎下方留言或者私信,看到会回复。实测可用~

    展开全文
  • 1、el-table双击编辑单元格。 2、el-input的autofocus,并且解决只有第一次触发的问题。 3、el-input回车操作enter与失焦事件blur冲突(会触发两次导致操作异常)。 4、如果是组件间操作,tableData是从父组件...

    各种方法汇总:

    1、el-table的cell-dblclick双击事件。

    2、

     

    思路:

    给el-table中需要可编辑的每一个单元格内容增加各自对应的标志位flag,通过变flag的值为true或false,判断显示input内容或文字内容。

     

    知识点:

    1、el-table双击编辑单元格。

    2、el-input的autofocus,并且解决只有第一次触发的问题。

    3、el-input回车操作enter与失焦事件blur冲突(会触发两次导致操作异常)。

    4、如果是组件间操作,tableData是从父组件通过props接过来的,在本子页面中定义了另一个空数组赋值过来,需要增加this.tableData = [...this.tableData]操作。

    5、JS通过window对象才能调用vue的this对象。

     

    详解:

    1、通过js中的props从父组件接收表格内容(单页操作此步省略)

    props:{
        tab2list:Array,
    },

    2、通过js中的data定义一个空数组,页面绑定这个空数组,赋值表格内容(也可以直接绑定tab2list,那就省略这一步,后面所有的tableData替换为tab2list即可)

    data() {
        return {
            tableData:[],//用来展示
        };
    },

    3、template部分

     

    展开全文
  • 第一步:声明表格可双击编辑方法 <el-table ref="table" :data="userList" @cell-dblclick="doubleClickCell"> ... </el-table> 第二步:设置需要双击编辑的列 <el-table-column prop="level" ...
  • 使用2013版excel时,当鼠标双击单元格进入编辑模式时、或者直接在单元格内输入内容时,电脑会卡顿2-5秒钟,在这个过程中电脑形同死机,explorer.exe进程会使得cpu占用率会瞬间飞到100%(可见),每编辑一个单元格...
  • 使用QTableView单元格编辑功能时,遇到了以下问题: 双击可编辑,但单元格内容置空,未修改退出编辑状态,内容变为0。 应该这样修改,即可双击单元格进入编辑状态,内容处于被选中状态, QVariant dataModel::...
  • </el-table-column> </el-table> 这里就比较简单的创建一个表格,拥有两个列,这里注意一定要给表格绑定双击事件属性,不然监听双击事件。 //@cell-dblclick有四个默认的返回参数,具体包括什么这里可以自己打印...
  • 在一些网站上我们经常看到交互性很强的功能。一些用户资料可以直接双击出现文本框,并在此输入新的资料即可修改,无需再按确定按钮等。...今天小编给大家分享JS实现双击内容变为可编辑状态,需要的的朋友参考下
  • 这个editor是要写的 这个就是我要可以编辑的字段 输入的类型是文本的 记得加上下面这些代码 加在外面即可 这些代码是单纯的改变前端的数据 想要改变后台的数据就 是通过onAfterEdit这个事件进行的!   ...
  • 然而在可编辑模式下则行不通,一旦单元格鼠标点击后,若该列编辑则表格会失去焦点,从而导致选中的内容丢失,因此无法进行复制、粘贴,怎么办?其实方案挺简单,就是在鼠标松开前进行复制,后续再粘贴
  • vue+element表格双击编辑单元格

    千次阅读 2020-08-18 11:12:27
    思路:给每条对应的数据都加上edit:false/true属性来控制该条数据对应的单元格你内显示的是输入框还是文本内容 html部分 1、element文档中有写关于表格的事件 2、每条数据对应都有edit属性,为true的时候显示...
  • 在VS平台开发的一个可以双击ListControl单元格进行编辑的代码示例。 在VS平台开发的一个可以双击ListControl单元格进行编辑的代码示例。
  • 锁定单元格不被任意修改和删除 有时候我们希望对Excel表格的数据编辑做一些限制:比如只允许部分单元格的内容可以修改,其余的单元格数据则允许修改(包括字号、字体等),我们可以这样操作。锁定一个单元格不被任意...
  • GridView编辑单元格

    2015-11-12 17:21:07
    编辑GridView单元格 说明:单元格获取焦点,则单元格处于编辑状态,单元格失去焦点,则立即更新数据库。采用非Ajax技术。 1、访问Session中的数据 这个例子是用户使用Session中数据。鼠标点击编辑GridView单元格。...
  • 通过配置ondbclick事件来实现双击功能ondblClickRow:function(rowid,iRow,iCol,e) {//获取表格的初始model var colModel =$(TableId).jqGrid().getGridParam("colModel"); ...
  • 在以下博客'操作二: 单元格编辑'基础上进行改写 https://blog.csdn.net/yhflyl/article/details/88689304 主要改写了以下几点: 1, focus那里改动了, 将原先的 el.getElementsByTagName('input')[0].focus() 改成...
  • onDblClickCell:function(index,field,value){ //*双击单元格编辑 $(this).datagrid('beginEdit', index); var ed = $(this).datagrid('getEditor', {index:index,field:field}); $(ed.target)...
  • <el-table :data="tableData" class="tb-edit" style="width: 100%" ref="multipleTable" @selection-change="handleSelectionChange" highlight-current-row ...
  • 在日常使用时,如果要实现双击girdview中的单元格弹出该单元格的信息。 RowClick事件可以实现该功能且比较简单,但该事件单击触发,要想单击只是选中该条信息,双击触发功能则使用DoubleClick事件。 但无论你双击这...
  • 下面是datagriad的html,主要的地方是:editor="text" 这个属性一定要配置,不然不能生效,不一定是text,可以使用的类型有:text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree。...
  • vue+elementTable每行多个单元格双击修改 绑定@cell-dblclick双击事件,显示input进行修改,失焦绑定@blur事件
  • <script type="text/javascript"> function doTableTdEditClick(param){ doTdEditable(param); } function doTdEditable(param){ var input ="<input type='text' id='temp' value='"+$(...
  • //设置点击事件,双击单元格,弹出修改信息的窗口或者框 connect(ui->...//之前忘了写这句,不能弹出窗口 dialog->show(); }); //双击单元格选中一行 //设置选中整行 ui->tableWidget..
  • 本文实例演示了DevExpress实现GridControl单元格编辑验证的方法,比较实用的功能,具体方法如下: 主要功能代码如下: /// /// 自定义单元格验证 /// /// <param name=view>GridView /// <param name=e>...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,922
精华内容 3,968
关键字:

双击单元格不能编辑