web中切换详情信息和编辑功能

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/q646926099/article/details/81026480

在web应用中,我们经常会查看某个数据详情,并且能编辑它,在同一个页面同一个区域中,不用再弹窗,具体描述可能不太清楚,请看效果图,这是之前做的一个商品的详情和编辑,现在记录一下:


数据的绑定我是使用vue.js绑定的,比较方便,贴部分代码,其他类似:

     <td>Sku编码</td>
     <td>
         <span>{{product.sku}}</span>
         <input type="text" class="textbox underline edit-item" v-model="product.sku" style="display: none;">
     </td>

隐藏了一个input,同时绑定了商品对应的数据,点编辑的时候,把这些文本框显示出来就好了。

    function editProductBasicInfo() {
        $(".edit-item").fadeIn().siblings('span').hide();
        $('#saveProductBasicBtn').fadeIn();
        $('#cancelEditBtn').fadeIn();
    }
比较简单,比较实用。


阅读更多

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