susuzhe

vue/ react/ nodejs/ gulp/ webpack/ hello mui /h5 /angular/js jquery/CSS3 h5/iscroll/swiper/bootstrap

table表格编辑保存插件
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>蚁呼后台管理系统</title>
        <style>
            .layui-table .layui-btn{
                height: 28px;
                line-height: 28px;
            }
            .dis-none{
                display: none;
            }
        </style>
    </head>

    <body>
        <ul class="layui-nav layui-nav-tree layui-nav-side" lay-filter="test">
          <li class="layui-nav-item">
            <a href="javascript:;" style="font-size: 24px;text-align: center;color: #009688;">蚁呼</a>
          </li>
          <li class="layui-nav-item layui-nav-itemed">
            <a href="javascript:;">关键词库</a>
          </li>
           <li class="layui-nav-item">
            <a href="/yihu/norecognizelist.php">未识别列表</a>
          </li>
        </ul>
        <div class="layui-form">
            <div class="layui-form-item left">
                <label class="layui-form-label">请选择视图</label>
                <div class="layui-input-block">
                    <select name="ivrviewid" class="sel" lay-verify="required">
                        <option value=""></option>
                        {foreach from=$ivrviewarr key=key item=item}
                            <option value="{$key}">{$item}</option>
                        {/foreach}
                    </select>
                </div>
            </div>
            <div class="layui-form-item left">
                <label class="layui-form-label">语境分类</label>
                <div class="layui-input-block">
                    <select name="contexttype" class="selyu" lay-verify="required">
                        <option value=""></option>
                        {foreach from=$contexttypes key=key item=item}
                            <option value="{$key}">{$item}</option>
                        {/foreach}
                    </select>
                </div>
            </div>
            <div class="layui-form-item ">
                <label class="layui-form-label">输入文件名</label>
                <div class="layui-input-inline">
                    <input type="text" name="filename" lay-verify="required"  class="layui-input fileName"  value="">
                </div>
            </div>
            <div class="layui-form-item left" style="padding-top: 0">
                <label class="layui-form-label" style="width: 110px;padding: 0 15px;">输入关键词(多个关键词用,隔开)</label>
                <div class="layui-input-inline" style="width: 600px;">
                    <input type="text" name="tags" lay-verify="required"  class="layui-input tags"  value="">
                </div>
            </div>
            <div class="layui-form-item left" style="padding-top: 0">
                <input type="submit" name="" class="layui-btn goBtn"  value="提交"></button>
            </div>
        </div>
        <div style="padding: 0 0 0 20px;">
            <table class="layui-table">
              <colgroup>
                <col width="180">
                <col width="200">
                <col width="200">
                <col width="460">
              </colgroup>
              <thead>
                <tr>
                  <th>视图名称</th>
                  <th>语境分类</th>
                  <th>文件名</th>
                  <th>关键字</th>
                  <th width=16%>操作</th>
                </tr> 
              </thead>
              <tbody>
              {foreach from=$list item=item}
                <tr data-oneid="{$item.id}">
                  <td>
                    <span class="tdEdit j_getsel">{if isset($ivrviewarr[$item.ivrviewid])}{$ivrviewarr[$item.ivrviewid]}{else}{$item.ivrviewid}{/if}</span>
                    <div class="layui-form dis-none tdVal">
                        <select name="ivrviewid" class="j_sel" lay-verify="required">
                            <option value=""></option>
                            {foreach from=$ivrviewarr key=k item=i}
                                <option value="{$k}"  {if $k==$item.ivrviewid} selected='selected' {/if}>{$i}</option>
                            {/foreach}
                        </select>
                    </div>
                  </td>
                  <td>
                    <span class="tdEdit j_getselyu">{if isset($contexttypes[$item.contexttype])}{$contexttypes[$item.contexttype]}{else}{$item.contexttype}{/if}</span>
                    <div class="layui-form dis-none tdVal">
                        <select name="contexttype" class="j_selyu" lay-verify="required">
                            <option value=""></option>
                            {foreach from=$contexttypes key=k item=i}
                                <option value="{$k}"  {if $k==$item.contexttype} selected='selected' {/if}>{$i}</option>
                            {/foreach}
                        </select>
                    </div>
                  </td>
                  <td>
                    <span class="tdEdit j_getnames">{$item.filename}</span>
                    <input type="text" class="layui-input dis-none tdVal j_names"  value="{$item.filename}">
                  </td>
                  <td>
                      <span class="tdEdit j_getfilenames">{$item.tags}</span>
                      <input type="text" class="layui-input dis-none tdVal j_filename"  value="{$item.tags}">
                  </td>
                  <td>
                    <button class="layui-btn layui-btn-normal j_edit">编辑</button>
                    <button class="layui-btn layui-btn-normal j_sure dis-none">确定</button>
                    <button class="layui-btn layui-btn-danger j_del">删除</button>
                  </td>
                </tr>
               {/foreach}
              </tbody>
            </table>
        </div>
    </body>

</html>

    /**
     * [编辑接口地址 删除接口地址]
     * @type {String}
     */
    $.fn.controlTable({
        editUrl:'/yihu/edittag.php',
        delUrl:'/yihu/deletetag.php'
    });

    /**
     * @Author   QG
     * @DateTime 2018-04-11
     * @desc     {{表格编辑、删除插件}}
     * @version  [version]
     * @param    {[type]}   $         [description]
     * @param    {[type]}   window    [description]
     * @param    {[type]}   undefined [description]
     * @return   {[type]}             [description]
     */
    ;(function($,window,undefined){
        var tableControl = function(ele,options){
            this.ele = ele;
            this.defaults = {
                edit:function(){},
                del:function(){}
            };
            this.settings = $.extend({},this.defaults,options);
            this.init();
        };

        tableControl.prototype = {
            init:function(){
                this.edit();
                this.sure();
                this.delTr();
            },
            edit:function(){
                var _that = this;
                $('.j_edit').click(function(){
                    var that = $(this);
                    var needContorlDom = that.parents('tr');
                    needContorlDom.find('.tdEdit').addClass('dis-none');
                    needContorlDom.find('.tdVal').removeClass('dis-none');
                    that.addClass('dis-none').next().removeClass('dis-none');
                });
            },
            sure:function(){
                var _this = this;
                $('.j_sure').click(function(){
                    var that = $(this);
                    var needContorlDom = that.parents('tr');
                    //编辑参数
                    var changeVal = {};
                    changeVal.ivrviewid = needContorlDom.find('.j_sel option:selected').val();
                    changeVal.contexttype = needContorlDom.find('.j_selyu option:selected').val();
                    changeVal.filename  = needContorlDom.find('.j_names').val();
                    changeVal.tags      = needContorlDom.find('.j_filename').val();
                    changeVal.id        = needContorlDom.attr('data-oneid');
                    //渲染修改后的值
                    needContorlDom.find('.j_getsel').html(needContorlDom.find('.j_sel option:selected').text());
                    needContorlDom.find('.j_getselyu').html(needContorlDom.find('.j_selyu option:selected').text());
                    needContorlDom.find('.j_getnames').html(changeVal.filename);
                    needContorlDom.find('.j_getfilenames').html(changeVal.tags);
                    needContorlDom.find('.tdEdit').removeClass('dis-none');
                    //切换操作
                    needContorlDom.find('.tdVal').addClass('dis-none');
                    that.addClass('dis-none').prev().removeClass('dis-none');
                    //编辑确认
                    _this.ajaxPost(_this.settings.editUrl,changeVal,function(){
                        layer.msg('编辑成功!', {
                          time: 1000
                        });  
                    });
                });
            },
            delTr:function(){
                var _this = this;
                $('.j_del').click(function(){
                    var that = $(this);
                    var params = {};
                    var par = $(this).parents('tr');
                    params.id = par.attr('data-oneid');
                    layer.open({
                      title:'提示',
                      content: '确认删除?',
                      yes: function(index,layero){
                        _this.ajaxPost(_this.settings.delUrl,params,function(){
                            par.remove();
                            layer.close(index);
                        });
                      }
                    });  

                });
            },
            ajaxPost:function(url,param,f){
                var _that = this;
                $.post(url,param,function(data){
                    var data = JSON.parse(data);
                    if(data.code == '10000'){
                        if (f && typeof f === "function") {  
                            f();
                        } 
                    }
                });
            }
        };

        $.fn.controlTable = function(options){
            var obj = new tableControl(this,options);
            return obj;
        }
    })(jQuery,window,undefined)
{/literal}
阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/susuzhe123/article/details/79958235
个人分类: web前端开发 js
想对作者说点什么? 我来说一句

jqueryTable编辑的实现

2009年12月14日 40KB 下载

没有更多推荐了,返回首页

不良信息举报

table表格编辑保存插件

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭