精华内容
下载资源
问答
  • easyui可编辑表格编辑器设置值

    千次阅读 2017-06-16 16:45:05
    假设有这样的场景,使用easyUI的可编辑表格时,有些内容是通过其中一个编辑器编辑完后到后台取数据,返回数据后插入到部分编辑器中

    假设有这样的场景,使用easyUI的可编辑表格时,有些内容是通过其中一个编辑器编辑完后到后台取数据,返回数据后插入到部分编辑器中,为编辑器设置值可以用以下的方法

    function setGridFieldsValue(gridID,rowIndex,fieldArr,rowData,focusField){
        //gridID 是表格的ID,rowIndex是当前编辑行的索引,fieldArr是要插入值的字段数组,rowData是要插入的数据(json对象),focusField是插入数据后,焦点在哪个字段上
        var editors = $("#"+gridID).datagrid("getEditors",rowIndex),
            editorLength = editors.length;
        for(var j=0; j<fieldArr.length; j++){
            for(var i=0; i<editorLength; i++){
                var ed = editors[i];
                if(ed.field == fieldArr[j]){
                    $(ed.target)[ed.type]("setValue",rowData[fieldArr[j]]);
                }else if(ed.field == focusField){
                    $(ed.target.siblings("span").children("input")).focus();
                }
            }
        }
        $("#"+gridID).datagrid('clearSelections');
    }

    完整示例代码

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>可编辑表格编辑器设置值</title>
            <link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.css"/>
            <link rel="stylesheet" type="text/css" href="../easyui1.5/themes/bootstrap/easyui.css"/>
            <link rel="stylesheet" type="text/css" href="../easyui1.5/themes/icon.css"/>
            <script src="../easyui1.5/jquery.min.js" type="text/javascript" charset="utf-8"></script>
            <script src="../easyui1.5/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
            <script src="../easyui1.5/jquery.edatagrid.js" type="text/javascript" charset="utf-8"></script>
            <script src="../easyui1.5/locale/easyui-lang-zh_CN.js" type="text/javascript" charset="utf-8"></script>
            <style type="text/css">
                /**
                 * 解决在编辑时看不到内容的问题,这是由于使用easyUI的bootstrap主题导致的
                 */
                .datagrid-row.datagrid-row-editing.datagrid-row-selected{
                    background: #F3F3F3;
                    color: #333333;
                }
            </style>
        </head>
        <body>
    
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-12">
                        <table id="editorEventGrid" style="width: 100%;height: 400px;"></table>
                        <div id="gridToolbar" class="container-fluid">
                            <div class="row">
                                <div class="col-sm-12">
                                    <a class="btn btn-sm btn-primary pull-right" onclick="addRow()">增加</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    
            <script type="text/javascript">
    
                var userData = [
                    {"uid":1,"username":"张三","age":20,"sex":0,"cell":"13076847475","birthday":"1990-01-01"},
                    {"uid":2,"username":"李四","age":30,"sex":1,"cell":"15876847478","birthday":"1990-02-02"},
                    {"uid":3,"username":"王五","age":40,"sex":0,"cell":"18976847479","birthday":"1990-03-03"}
                ]
    
                $(function(){
    
                    var rowEditingIndex=0;
                    $("#editorEventGrid").edatagrid({
                        singleSelect:true,
                        striped:true,
                        nowrap:true,
                        fitColumns:true,
                        loadMsg:"加载数据中...",
                        pagination:true,
                        pageNumber:1,
                        pageSize:30,
                        pageList:[30,40,50],
                        toolbar:"#gridToolbar",
                        columns:[[
                            {field:'uid',title:'姓名',width:80,formatter:function(value,row,index){return row.username},editor:{type:'combobox',options:{
                                required:true,
                                textField:'name',
                                valueField:'uid',
                                selectOnNavigation:false,
                                data:[
                                    {name:"张三",uid:1},
                                    {name:'李四',uid:2},
                                    {name:'王五',uid:3},
                                    {name:'王老五',uid:4}
                                ],
                                onChange:function(n,o){
                                    if(n){
                                        //正常情况下,应该到后台获取数据
                                        var obj = getObj(n);
                                        if(obj){
                                            setGridFieldsValue("editorEventGrid",rowEditingIndex,["age","sex","cell","birthday"],obj,"address");
                                        }
                                    }
                                }
                            }}},
                            {field:'age',title:'年龄',width:40,align:'right',editor:'numberbox'},
                            {field:'sex',title:'性别',width:40,formatter:function(value,row,index){return row.sexName},editor:{type:'combobox',options:{
                                textField:'text',
                                valueField:'value',
                                data:[
                                    {text:"男",value:0},
                                    {text:"女",value:1}
                                ]
                            }}},
                            {field:'cell',title:'手机',width:80,align:'center',editor:{type:'numberbox',options:{required:true}}},
                            {field:'address',title:'地址',width:150,editor:{type:"textbox",options:{required:true}}},
                            {field:'birthday',title:'生日',width:60,align:'center',editor:'datebox'}
                        ]],
                        onAdd:function(index,row){
                            rowEditingIndex = index;
                            //添加行时,让第一个编辑器获取焦点
                            $(".datagrid-row-editing .textbox-text")[0].focus();
                            //为编辑器添加键盘事件
                            var editors = $("#editorEventGrid").edatagrid("getEditors",index);
                            for(var i=0; i<editors.length; i++){
                                var editor = editors[i];
                                $(editor.target.siblings("span").children("input")).on("keydown",function(e){
                                    var code = e.keyCode || e.which;
                                    if(code == 13){//13是回车键
                                        addRow();
                                    }else if(code == 38){//38是方向↑键
                                        cancelRow();
                                    }
                                });
                            }
                      },
                      onEndEdit:endEditing
                    })
    
                });
    
                function addRow(){
                    $("#editorEventGrid").edatagrid("addRow");
                }
    
                function cancelRow(){
                    $("#editorEventGrid").edatagrid("cancelRow");
                }
    
                function endEditing(index,row){
                    var ed = $("#editorEventGrid").edatagrid("getEditor",{index:index,field:'uid'});
                    var ed2 = $("#editorEventGrid").edatagrid("getEditor",{index:index,field:'sex'});
                    row.username = $(ed.target).combobox("getText");
                    row.sexName = $(ed2.target).combobox("getText");
                }
    
                function setGridFieldsValue(gridID,rowIndex,fieldArr,rowData,focusField){
                    //gridID 是表格的ID,rowIndex是当前编辑行的索引,fieldArr是要插入值的字段数组,rowData是要插入的数据(json对象),focusField是插入数据后,焦点在哪个字段上
                    var editors = $("#"+gridID).datagrid("getEditors",rowIndex),
                        editorLength = editors.length;
                    for(var j=0; j<fieldArr.length; j++){
                        for(var i=0; i<editorLength; i++){
                            var ed = editors[i];
                            if(ed.field == fieldArr[j]){
                                $(ed.target)[ed.type]("setValue",rowData[fieldArr[j]]);
                            }else if(ed.field == focusField){
                                $(ed.target.siblings("span").children("input")).focus();
                            }
                        }
                    }
                }
    
    
                function getObj(uid){
                    for(var i=0; i<userData.length; i++){
                        if(userData[i].uid == uid){
                            return userData[i]
                        }
                    }
                }
    
            </script>
    
        </body>
    </html>
    
    展开全文
  • jQuery+PHP实现实时编辑表格字段内容

    千次阅读 2011-01-20 08:46:00
    本例中,我们会通过jQuery实现单击将一个文本信息变为可编辑的表单,你可以对文本内容进行编辑,然后点击“确定”按钮,新的内容将发送到后台PHP程序处理,并保存到数据库;当点击“取消”按钮,则页面恢复到初始...

    在本例中,我们会通过jQuery实现单击将一个文本信息变为可编辑的表单,你可以对文本内容进行编辑,然后点击确定按钮,新的内容将发送到后台PHP程序处理,并保存到数据库;当点击取消按钮,则页面恢复到初始状态。

    本例适用场景:当查看详细资料,如用户详情信息,发现其中某几个字段信息需要修改,可直接点击该字段内容进行修改,节约了用户时间,(传统的做法是进入一个编辑页面,列出所有编辑的字段信息,即使你只需要编辑其中一两个字段内容,然后点击提交)提高了WEB响应速度,从而提高了前端用户体验。

    本例依赖jquery库,并基于jeditable插件,具有以下特点:

    • 实时编辑,后台实时响应,并即时完成局部刷新。
    • 可自定义输入表单类型,目前jeditable提供text,select,textarea类型。
    • 响应键盘的回车和ESC键。
    • 插件机制,本例提供与jquery uidatepicker日历控件的整合。

    下面我们来一步步讲解实现过程。

    XHTML

    我们需要制作一个表格,如下:

    <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
      <thead> 
        <tr class="table_title"> 
          <td colspan="4"><span class="open"></span>客户信息</td> 
        </tr> 
      </thead> 
      <tbody> 
        <tr> 
          <td width="20%" class="table_label">姓名</td> 
          <td width="30%" class="edit" id="username">李小三</td> 
          <td width="20%" class="table_label">办公电话</td> 
          <td width="30%" class="edit" id="phone">021-12345678</td> 
        </tr> 
        <tr> 
          <td class="table_label">称谓</td> 
          <td class="edit" id="solutation">先生</td> 
          <td class="table_label">手机</td> 
          <td class="edit" id="mobile">13800138000</td> 
        </tr> 
        <tr> 
          <td class="table_label">公司名称</td> 
          <td class="edit" id="company">常丰集团</td> 
          <td class="table_label">电子邮箱</td> 
          <td class="edit" id="email">lrfbeyond@163.com</td> 
        </tr> 
        <tr> 
          <td class="table_label">潜在客户来源</td> 
          <td class="edit_select" id="source">公共关系</td> 
          <td class="table_label">有限期</td> 
          <td class="datepicker" id="sdate">2011-11-30</td> 
        </tr> 
        <tr> 
          <td class="table_label">职位</td> 
          <td class="edit" id="job">部门经理</td> 
          <td class="table_label">网站</td> 
          <td class="edit" id="web">www.helloweba.com</td> 
        </tr> 
        <tr> 
          <td class="table_label">创建时间</td> 
          <td>2010-11-04 21:11:59</td> 
          <td class="table_label">修改时间</td> 
          <td id="modifiedtime">2010-11-05 09:42:52</td> 
        </tr> 
        <tr> 
          <td class="table_label">备注</td> 
          <td class="textarea" id="note" colspan="3">备注信息</td> 
        </tr> 
      </tbody> 
    </table>
     

    这是一个用户信息的表格,从代码中可以发现响应的字段信息的td都给了一个classid属性,并赋值。值得一提的是表格中的td对应的id的值是和数据库中的字段名称一一对应的,这样做就是为了在编辑时让后台获取相应的字段信息,后面的PHP代码中会讲到。

    CSS

    table{width:96%margin:20px autoborder-collapse:collapse;} 
    table
     td{line-height:26pxpadding:2pxpadding-left:8pxborder:1px solid #b6d6e6;} 
    .table_title
    {height:26pxline-height:26pxbackground:url(btn_bg.gif) repeat-x bottom
     font-weight:boldtext-indent:.3emoutline:0;} 
    .table_label
    {background:#e8f5fetext-align:right; } 

    CSS渲染了表格样式,让表格看起来更舒服点。

    jQuery

    提到jquery,一定要记住在页面的<head>之间要引用jqueryjeditable插件

    <script type="text/javascript" src="js/jquery.js"></script> 
    <script
     type="text/javascript" src="js/jquery.jeditable.js"></script> 

    然后开始调用插件。

    $(function(){ 
         $('.edit').editable('save.php'{  
             width     :120
             height    :18
             //onblur    : 'ignore', 
             cancel    : '取消'
             submit    : '确定'
             indicator : '<img src="loader.gif">'
             tooltip   : '单击可以编辑...' 
         }); 
    }
    ); 

    jeditable插件提供了很多属性和方法的调用。可以设置宽度,高度,按钮的文本信息,提交时的加载图片,鼠标滑上的提示信息等等。save.php是编辑后的信息最终提交的后台程序的地址。现在看看是不是表格中的信息可以编辑了哦。

    jeditable还提供了selecttextarea类型的编辑,并提供插件api接口。

    来看下拉选择框select的处理:

    $('.edit_select').editable('save.php'{  
        loadurl   : 'json.php'
        type      : "select"
    }
    ); 

    type指定的是select类型,select里加载的数据来自json.phpjson.php提供了下拉框所需的数据源。

    $array['老客户'] =  '老客户'
    $array
    ['独自开发'] =  '独自开发'
    $array
    ['合作伙伴'] =  '合作伙伴'
    $array
    ['公共关系'] =  '公共关系'
    $array
    ['展览会'] =  '展览会'
    print
     json_encode($array); 

    这些数据是直接存在json.php文件里的,当然你也可以通过读取数据库信息,然后生成json数据,关于如何生成json数据,请查看PHP中JSON的应用。还有一种方法是直接在editable中指定data

    $('.edit_select').editable('save.php'{  
        data : " {'老客户':'老客户','独自开发':'独自开发','合作伙伴':'合作伙伴', '展览会':'展览会'}"
        type : "select"
    }
    ); 

    不难发现,其实上述代码中的data就是一串json数据。

    textarea类型就不再多数,将type类型改为textarea就可以了。PS:默认类型为text

    当处理日期类型时,我接入了一个jquery uidatepicker日历插件,当然别忘了要引入juqery ui插件和样式:

    <link rel="stylesheet" type="text/css" href="css/jquery-ui.css" /> 
    <script
     type="text/javascript" src="js/jquery-ui.js"></script> 

    接入jquery uidatepicker日历插件

    $.editable.addInputType('datepicker'{ 
        element : function(settings, original) { 
            var input = $('<input class="input" />'); 
            input.attr("readonly","readonly"); 
            $(this).append(input); 
            return(input); 
        }
        plugin : function(settings, original) { 
            var form = this
            $("input",this).datepicker(); 
        } 
    }
    ); 

    调用的代码直接指定type类型为datepicker即可。

    $(".datepicker").editable('save.php'{  
        width     : 120
        type      : 'datepicker'
        onblur    : "ignore"
    }
    ); 

    现在看看,表格中的有限期字段的日期是不是可以修改了。好了,还有其他更多的插件接入期待您的加入。

    PHP

    编辑好的字段信息会发送到后台程序save.php程序处理。save.php需要完成的工作是:接收前端提交过来的字段信息数据,并进行必要的过滤和验证,然后更新数据表中相应的字段内容,并返回结果。

    include_once("connect.php"); //连接数据库 
    $field
    =$_POST['id'];  //获取前端提交的字段名 
    $val
    =$_POST['value']; //获取前端提交的字段对应的内容 
    $val
     = htmlspecialchars($valENT_QUOTES); //过滤处理内容 
     
    $time
    =date("Y-m-d H:i:s"); //获取系统当前时间 
    if
    (empty($val)){ 
        echo "不能为空"
    }else
        //更新字段信息 
        $query=mysql_query("update customer set $field='$val',modifiedtime='$time' where id=1"); 
        if($query){ 
           echo $val
        }else
           echo "数据出错";     
        } 

    再回到开始的HTML代码,表格中显示的字段内容信息当然是从数据库读取来的,所以要用PHP读取数据表,把内容显示出来就OK,详细过程大家自己写一个吧。

    如此,可编辑的表格就此收工。但是还不能完工,关于对输入信息的有效性的验证问题我还在研究,后面的文章我会陆续附上,敬请关注,也期待各位朋友的加入。

     

     

    展开全文
  • easyUI可编辑表格编辑器添加事件

    千次阅读 2017-06-16 16:05:39
    使用easyUI的可编辑表格时,可以为编辑器添加键盘事件处理,这样就可以直接通过键盘进行操作,大大提升编辑效率。比如说编辑完一行时,可以按下回车就自动添加新行而不用去点击添加行按钮,编辑到一半想取消...

    在使用easyUI的可编辑表格时,可以为编辑器添加键盘事件处理,这样就可以直接通过键盘进行操作,大大提升编辑效率。比如说在编辑完一行时,可以按下回车就自动添加新行而不用去点击添加行按钮,在编辑到一半想取消编辑时,可以按键盘的方向键↑从而取消编辑。
    为编辑器添加事件,有两种方式。
    方式一:通过api获取对应的编辑器jQuery对象,为该对象添加事件
    方式二:通过类选择器选中对应的编辑器,再为它添加事件(当前编辑行有一个class是其他行没有的)

    需要注意的是,方式一通过api获取编辑器的jQuery对象时,api是通过editor.target来获取的,但在1.5版本的easyUI中,这是获取不到真正的编辑器对象的,通过浏览器的开发者工具查看代码发现,每个编辑器大概都是这种结构

    <input type="text" class="datagrid-editable-input textbox-f" style="display: none;">
    <span class="textbox textbox-invalid" style="width: 322px; height: 24px;">
        <input id="_easyui_textbox_input2" type="text"  class="textbox-text validatebox-text validatebox-invalid textbox-prompt" autocomplete="off" tabindex="" placeholder="" style="text-align: start; margin: 0px; padding-top: 0px; padding-bottom: 0px; height: 22px; line-height: 22px; width: 320px;" title="">
        <input type="hidden" class="textbox-value" value=""></span>

    editor.target 获取到的实际上是<input type="text" class="datagrid-editable-input textbox-f" style="display: none;">而真正用于输入的对象是span标签里面第一个input,所以应该为这个input添加事件而不是editor.target。

    方式一代码:

    var editors = $("#keyEventGrid").datagrid("getEditors",index);
    for(var i=0; i<editors.length; i++){
            var editor = editors[i];
            $(editor.target.siblings("span").children("input"))
                    .on("keydown",function(e){
                            var code = e.keyCode || e.which;
                            if(code == 13){
                                addRow("keyEventGrid");//添加新行
                            }else if(code == 38){
                                cancelRow("keyEventGrid");//取消编辑行
                            }
                })
    }

    方式二:

    $(".datagrid-row-editing .textbox-text").on("keydown",function(e){
            var code = e.keyCode || e.which;
            if(code == 13){
                    addRow("keyEventGrid");
            }else if(code == 38){
                    cancelRow("keyEventGrid");
            }
    });

    完整示例代码

    <!DOCTYPE>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>可编辑表格编辑器自定义事件</title>
            <link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.css"/>
            <link rel="stylesheet" type="text/css" href="../easyui1.5/themes/bootstrap/easyui.css"/>
            <link rel="stylesheet" type="text/css" href="../easyui1.5/themes/icon.css"/>
            <script src="../easyui1.5/jquery.min.js" type="text/javascript" charset="utf-8"></script>
            <script src="../easyui1.5/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
            <script src="../easyui1.5/jquery.edatagrid.js" type="text/javascript" charset="utf-8"></script>
            <script src="../easyui1.5/locale/easyui-lang-zh_CN.js" type="text/javascript" charset="utf-8"></sctipr>
            <style type="text/css">
                /**
                 * 解决在编辑时看不到内容的问题,这是由于使用easyUI的bootstrap主题导致的
                 */
                .datagrid-row.datagrid-row-editing.datagrid-row-selected{
                    background: #F3F3F3;
                    color: #333333;
                }
            </style>
        </head>
        <body>
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-12">
                        <table id="keyEventGrid" style="width: 100%;height: 400px;"></table>
                        <div id="gridToolbar" class="container-fluid">
                            <div class="row">
                                <div class="col-sm-12">
                                    <a class="btn btn-sm btn-primary pull-right" onclick="addRow('keyEventGrid')">增加</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    
            <script>
                $(function(){
                    $("#keyEventGrid").edatagrid({
                        toolbar:"#gridToolbar",
                        singleSelect:true,
                        fitColumns:true,
                        columns:[[
                            {field:"userName",title:"用户名",width:80,eidtor:{type:"textbox",options:{required:true}}},
                            {field:"age",title:"年龄",width:40,editor:"numberbox",align:"right"},
                            {field:"cell",title:"手机",width:60,editor:{type:"textbox",options:{required:true}}},
                            {field:"qq",title:"QQ",width:60,editor:"textbox"}
                        ]],
                        onAdd:function(index,row){
                            //使第一个编辑器获取焦点
                            $(".datagrid-row-editing .textbox-text")[0].focus();
                            //使用方式一或方式二注册事件
                        },
                        onSave:function(index,row){
                            //在添加新行时,onSave事件会被触发执行
                            //可以在这里添加一个保存的方法,在添加新行时,将上一行编辑的内容保存到数据库
                            //也可以直接在edatagrid添加一个saveUrl属性,这样不用写保存方法,也可以保存,缺点是保存时只能将row数据传到后台而不能添加其他数据
                            //当然,每编辑一行就保存一行的做法可能不太好,可以不处理这个保存的事件,在工具栏上添加一个保存按钮,当编辑完所有行时,点击保存按钮一次性保存
                        }
                    });
                });
    
                function addRow(grid){
                    $("#"+grid).edatagrid("addRow");
                }
    
                function cancelRow(grid){
                    $("#"+grid).edatagrid("cancelRow");
                }
            </script>
    
        </body>
    </html>
    展开全文
  • Table表格部分 &amp;lt;template&amp;gt; &amp;lt;el-table :data=&quot;tableData&quot; style=&quot;width: 100%&quot;&amp;gt; &amp;lt;el-table-column label=&...

    Table表格部分

    <template>
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          label="日期"
          width="180">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.date }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="姓名"
          width="180">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>姓名: {{ scope.row.name }}</p>
              <p>住址: {{ scope.row.address }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.name }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    
    <script>
      export default {
        data() {
          return {
            tableData: [{
              date: '2016-05-02',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄'
            }, {
              date: '2016-05-04',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1517 弄'
            }, {
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            }, {
              date: '2016-05-03',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1516 弄'
            }]
          }
        },
        methods: {
          handleEdit(index, row) {
            console.log(index, row);//这里可打印出每行的内容 
            //点击编辑
            this.dialogFormVisible = true //显示弹框
             let _row = row
             //将每一行的数据赋值给Dialog弹框(这里是重点)
            this.editForm = Object.assign({},_ row) // editForm是Dialog弹框的data
          },
          handleDelete(index, row) {
            console.log(index, row);
          }
        }
      }
    </script>
    

    Dialog 弹框部分

    <div>
               <el-button type="text" v-if = "dialogFormVisible"></el-button>
    
                      <el-dialog title="编辑" :visible.sync="dialogFormVisible">
    					// :model="editForm"绑定的数据
                        <el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
                              
                            <form>
                                <table class="table">
                                    <tr>
                                          <td><span>用户名:</span> <input type="text"   v-model="editForm.username" placeholder="请输入用户名"></td>
                                          <td><span> 姓名:</span><input type="text"   v-model="editForm.name" placeholder="请输入姓名"></td>
                                    </tr>
                                     <tr class="department">
                                          <td><span>工号:</span><input type="text"   v-model="editForm.userId" placeholder="请输入工号" ></td>
                                      <td><span>年龄:</span>  <input type="text"   v-model="editForm.age" placeholder="请输入年龄" onkeyup = "value=value.replace(/[^\d]/g,'')"></td>
                                   
                                    </tr>
                                     
                                    <tr>
                                     
                                      <td><span> 手机号:</span> <input type="tel"   v-model="editForm.phone" placeholder="请输入手机号" maxlength="11" onkeyup = "value=value.replace(/[^\d]/g,'')"></td>
                                      <td><span>座机:</span> <input type="tel"   v-model="editForm.mobile" placeholder="请输入座机" onkeyup = "value=value.replace(/[^\d]/g,'')"></td>
    
                                    </tr> 
                                    <tr>
                                      <td><span>邮箱:</span> <input type="email"   v-model="editForm.email" placeholder="请输入邮箱"></td>
                                      <td><span>保密等级:</span> <input type="text"   v-model="editForm.name" placeholder="请输入盒机"></td>
    
                                    </tr>
                                 
                                     <tr>
                                      <td><span> 备注:</span><input type="tel"   v-model="editForm.remarks" placeholder="请输入备注"></td>
                                    </tr>      
                                     
                                </table>
    
                            </form>                               
    
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                          <el-button @click="dialogFormVisible = false">取 消</el-button>
                          <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
                        </div>
                      </el-dialog>
    
    展开全文
  • 2、这种情况其实内容都是一样的,只不过一个是手机端,一个为电脑端,所以把word导出为PDF形式就可以了,变成图片类型的就不会丢失格式,但文本文件电脑端和手机容易存在显示问题 3、也有可能是手机和电脑用来...
  • Vue封装的可编辑表格插件

    万次阅读 2018-01-03 13:56:11
    可任意合并表头,实现单元格编辑。 页面效果如图: 页面使用如下: &lt;template&gt; &lt;div&gt; &lt;v-table :datat = "tableData" :thlabel="thlabel" :...
  • 这样的情况:网站的内容是 cms 系统后台用 富文本编辑器 填充的,这个时候,就有一个问题:当屏幕分辨率变成 750px 以下,也就是手机端的时候,后台用富文本编辑器填充的内容样式就会变化,最重要的是,富文本编辑...
  • 查看css,可编辑表格的css如下,td的width为99,.datagrid-editable类使左右的padding都为0   查看表头的css,td的width为107,左右padding为4,width为107=99+8   于是想到解决办法,强制修改可编辑表格...
  • 但是很多编辑器出来的网页都是电脑适配的,在手机上格式混乱。 我想要一个能在手机的webview适配的。专门做手机网页的富文本编辑器,求推荐。 现在给电脑网页用的富文本编辑器很多,百度的UEditor等等。但在手机...
  • 本文讨论了csdn markdown编辑表格使用说明及不能调整宽度等问题处理。我们可以通过使用markdown编辑器直接插入html片段,比如&lt;table&gt;代替编辑表格,或根据css计算列宽原理实现表格列宽调整。...
  • layui中table表格内容过多自动换行

    千次阅读 2020-05-13 10:41:40
    改样式前效果:超出内容没有自动换行,超出部分需要自动换行。 将以下css样式覆盖到当前html文件的头部样式中即可: <style> .layui-table-cell { font-size:14px; padding:0 5px; height:auto; ...
  • 3、 新行编辑表格组件 JVXETable 推出,更强大的性能、支持灵活自定义组件,支持各种复杂业务场景,支持各种复杂布局,轻松满足ERP项目复杂布局要求、提供各种复杂布局场景示例。 4、Token安全漏洞严重问题解决 ...
  • 如何快速将线下表格数据线

    千次阅读 2018-11-06 11:52:00
    这里主要分享,Web 开发中线上表格的几个前端框架的介绍及使用,其中包括: Tabledit :针对普通表格,快速实现编辑及删除的工作; Bootstrap-Table:相对定制化的一个 Bootstrap 线上表格框架,其功能较全面; ...
  • 发送邮件以表格形式发送内容

    千次阅读 2019-12-10 22:57:44
    欢迎使用Markdown编辑器 你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑...我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们...
  • Bootstrap的表格禁止编辑功能

    千次阅读 2018-05-21 21:23:40
    客户名字 <span class="input-xlarge uneditable-input">Some value here 头像 性别 手机号码 ...父级加个 ... 这样就只能显示内容而不能编辑内容!
  • 我用的最多的是小蚂蚁编辑器,它插入表格这方面功能很完善,有多中方法可以添加表格,下面我们来逐一介绍。 一、导入Excel 这个是最简单方便也是效果最好的一种。可以将做好的Excel表格直接导入到我们的文章中。 1...
  • 折叠式卡片布局PC版网站中可能不常见,但是在手机版,小屏幕的网页浏览会大发异彩。 AmazeUI也提供了折叠式卡片布局,虽然官网有例子,但是这种折叠式卡片布局,整合内容列表、表格组件还是需要一番功夫。 比如...
  • PHP+AJAX 实现表格实时编辑

    千次阅读 2018-08-02 18:02:44
    不刷新当前页面的前提下,与服务器进行异步交互 优化了浏览器和服务器之间的数据传输、减少了不必要的数据往返 把部分数据转移到客户端,减少了服务器的压力 实现AJAX的基本思路 根据需求选择一个javascript...
  • 链接: https://pan.baidu.com/s/1-DgIQmPNwGydAYYwA_fT5w 提取码: pq9q 复制这段内容后打开百度网盘手机App,操作更方便哦@TOC 欢迎使用Markdown编辑器 你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。...
  • td, tr { border: 1px solid #000000; text-align: center; padding: 10px; } 做 WordPress 网站的时候,很多时候文章中都会用到 table 表格,今天就来总结分享四种WordP...
  • 右击表格弹出编辑、删除框

    千次阅读 热门讨论 2016-02-21 15:38:49
     之前ITOO验收的时候,米老师看到考评系统用到了右击表格弹出编辑、删除框的效果,要求所有系统都要实现。本想着之前留下有文档,应该会比较容易实现,可是文档里的看着就好费劲,实现起来就更难了。所以想着用一...
  • 本章的demo主要介绍了导航控制器和列表视图的使用,这一部分是做ios开发使用频率最高的一部分内容,这里只涉及一些简单的,最基本的方法 //试图控制器读取到内存之后再进行调用,程序屏幕显示读到内存后...
  • 人人都可以做的WebGIS·在线地图服务——将机场表格数据在线地图显示 1.表格数据格式转为.xls格式若直接是这个格式就不用转 2.导入ArcMap中用 工具包中的 Excel转Table工具 将数据文件转换 为表并加载图层...
  • java后台用富文本编辑内容存入数据库中,内容中包含html标签,想通过json传给移动端进行显示。 问题: 如何将内容在移动端显示出来 内容数据很长,通过json传送合理吗
  • 如何显示的对话框里面,能够显示一个表格? 如果是Windows系统下的VC
  • 做网站的时候,很多时候会用到wordpress表格,今天就来讲下4种方法网站上面加上wordpress表格 1. 最简单的方法 - 复制excel表格然后粘贴...excel编辑表格之后,选中表格,并复制(多余的空格不要复制)
  • Markdown表格——复杂表格

    千次阅读 2020-12-07 17:37:01
    表格内换行 基础的样式及设置对齐大家应该都知道,如下所示。 | Column 1 | Column 2 | Column 3 | |:--------| :---------:|--------:| | centered 文本居左 | right-aligned 文本居中 |right-aligned 文本居右| ...
  • 上月二手购入传说中的Moto Atrix4G(ME860)手机——就是那个一秒变笔记本电脑的神器手机...入手LapDock设备之前还试过了免Dock的WebTop玩法,个人觉得不是很实用,也从略。这里主要说说刷Ubuntu的事情。目录: 1、WebT
  • 手机改装服务器——Android的Linux(linux deploy)

    万次阅读 多人点赞 2018-12-29 14:52:15
    这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 38,959
精华内容 15,583
关键字:

如何在手机上编辑表格内容