# toolbar

**Repository Path**: joleye/toolbar

## Basic Information

- **Project Name**: toolbar
- **Description**: 前端工具类方法集合，可快速进入业务。
- **Primary Language**: JavaScript
- **License**: GPL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-04-24
- **Last Updated**: 2025-10-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: 工具栏方法

## README

## 目录
- [1. toolbar](#1-toolbar)
- [2. upload](#2-upload)
- [3. batchEdit](#3-batchEdit)
- [4. select选择器](#3-select选择器)
---

## 1. toolbar

itemPost：逐个提交，默认false

```js
$('.toolbar .btn').toolbar({
    checkbox_name: 'customer_id',
    params: {},//object or function
    before: function(dataConf, act){
        var del_tag = 0;
        $('input[name=' + dataConf.checkbox_name + ']:checked').each(function () {
            if($(this).data('tag') == -1){
                del_tag++;
            }
        });
        if(act == 'pass' && del_tag > 0){
            return confirm('有'+del_tag+'条删除信息，是否继续？') && confirm('有'+del_tag+'条删除信息，是否继续？');
        }else{
            return true;
        }
    },
    conf: {
        'drop': {
            confirm: '确认要删除%s条吗?',
            action: 'action_pass_drop',
            argName: 'ids',
        },
        'pass': {
            action: 'pass_action',
            argName: 'ids',
            params: {status : 'pass'}
        },
        'un-pass': {
            action: 'pass_action',
            argName: 'ids',
            params: {status : 'un-pass'}
        },
    }
});
```

## 2. upload

上传组件

### 上传按钮
```html
<div class="el-upload">
    <div class="el-file">
        <input type="file" class="el-file-input" id="_inputFile" name="inputFile" multiple>
        <label class="el-file-label" for="customFile">+</label>
    </div>
    <div id="upload_area_id">
    </div>
    <div class="process">
        <div class="progress-bar" id="progress-bar1" style="width: 0;"></div>
    </div>
</div>
```

### 预览模板
```html
<script type="text/html" id="img_tpl">
    <div class="img-item img-item-${status}">
        <div class="c-2">
            <a href="/${path}" title="文件名：${img_name}，上传日期：${add_time2}" target="_blank">
            <img src="/${img_path}" alt="${img_name}" width="60" height="60"/>
            </a>
        </div>
        <div class="c-2 remove">
            <input type="hidden" class="img_id" name="img_ids" value=""/>
            <a href="javascript:void(0);" onclick="img_drop_item(this)" data-id="${img_id}"
               class="glyphicon glyphicon-remove"></a>
        </div>
    </div>
</script>
```

### 初始化方法
```js
$('#_inputFile').upload({
    action: '/upload',
    callback_tpl: 'img_tpl',//回调显示模版
    upload_area_id: 'upload_area_id',//回调模板显示区域id
    process_bar_id: 'process_bar_id1',//进度条id
    init_url: '/get_image_list',//预览数据接口地址
    success: function(rows){},
    init_params: {typ_id: 10, link_id: ''},
    allow: ['jpg']
});

//新方法提交
$('#_inputFile').upload2({
    init_url: '',
    init_params: function(){},
    success: function(rows){},
    init_complete: function(rows){}
});
```

| 参数名称            | 说明                                  |
|-----------------|-------------------------------------|
| action          | 上传url                               |
| callback_tpl    | 回调模板id                              |
| upload_area_id  | 回调模板显示区域，需要搭配callback_tpl使用         |
| progress_bar_id | 进度条id                               |
| init_url        | 初始化url                              |
| init_params     | 初始化参数或方法，需要搭配初始url使用，方法则this指向当前文件域 |
| success         | 上传成功回调                              |
| init_complete   | 数据初始化回调函数                           |
| allow           | 允许上传文件，如:['mp3']                    |

## 3. batchEdit
异步编辑工具

## 3. select选择器
> data-url="select.json" 

> data-key_field="key"