zoukankan      html  css  js  c++  java
  • jQuery EasyUI/TopJUI上传多个附件并可以进行删除操作

    jQuery EasyUI/TopJUI上传多个附件并可以进行删除操作

    html

    <table data-toggle="topjui-datagrid"
           data-options="id:'productDg',
           url:'../../json/datagrid/product-list.json'">
        <thead>
        <tr>
            <th data-options="field:'id',title:'ID',checkbox:true"></th>
            <th data-options="field:'name',title:'商品名称'"></th>
            <th data-options="field:'code',title:'商品编号'"></th>
            <th data-options="field:'spec',title:'规格型号'"></th>
            <th data-options="field:'danwei',title:'规格型号'"></th>
            <th data-options="field:'sale_price',title:'销售单价'"></th>
        </tr>
        </thead>
    </table>
    
    <!-- 用户 表格工具栏 -->
    <div id="productDg-toolbar" class="topjui-toolbar"
         data-options="grid:{
               type:'datagrid',
               id:'productDg'
           }">
        <!--<a href="javascript:void(0)"
           data-toggle="topjui-uploader"
           data-options="iconCls:'fa fa-check-circle',
           btnCls:'topjui-btn-brown',
           parentGrid:{
               type:'datagrid',
               id:'productDg',
               unselectedMsg:'请先选中要上传附件的数据!'
           }">webUploader上传</a>-->
        <a href="javascript:void(0)"
           data-toggle="topjui-menubutton"
           data-options="method:'upload',
           extend:'#productDg-toolbar',
           iconCls:'fa fa-cloud-upload',
           btnCls:'topjui-btn-green',
           accept:'file',
           dialog:{
               title:'附件批量上传'
           },
           parentGrid:{type:'datagrid', id:'productDg'},
           uploadUrl:_ctx + '/json/response/upload.json?uuid={uuid}'">批量上传</a>
    </div>
    

      页面效果展示

     

     选择文件

      

     

    开始上传

     

         注意:目前批量上传控件必须要有Grid的界面才能使用,上传文件界面是以弹窗的形式展示。

    EasyUI中文网:http://www.jeasyui.cn

    TopJUI前端框架:http://www.topjui.com

    TopJUI交流社区:http://ask.topjui.com 

  • 相关阅读:
    强连通分量入度和出度
    Tarjan 强连通分量
    强连通是真的强~
    Yii2.0 RESTful API 基础配置教程
    微信小程序循环数组展示数据点击当前改变当前按钮状态
    初入博客园
    博客总目录
    当我们在谈论kmeans(4)
    当我们在谈论kmeans(5)
    当我们在谈论kmeans(3)
  • 原文地址:https://www.cnblogs.com/xvpindex/p/10984171.html
Copyright © 2011-2022 走看看