多功能选择对话框使用说明

作者：LT 发表于: 2016-11-07

多功能弹出层封装了通用的大数据选择查询逻辑，解决项目中各处需要频繁用到选择品牌、商品、门店、导购的选择对话框的需求。

功能

支持选择商品、品牌、门店、商户、导购【通过配置数据源，可选择任何数据】
支持自定义查询表单和数据
支持分页、显示选择结果、显示选择项目数
支持限制选择项目数

文件路径

js/admin/mod_powerSelectDia.js

使用示例

使用方式类似于 select2.js，返回和接收的标准化数据格式为 [{id:xx, text:xxx}]

具体请参考 js/admin/mod_couponEditDia.js

注意事项

配置 showResult 显示结果为 true 时，要增加对话框的高度60px，以便显示选择结果区域
如果查询表单比较复杂，配置好模板后，可以在配置 shownAfterFn 这个配置中注册一些表单的事件
如果要验证查询表单的输入，可在配置 getSearchPms 中对输入数据做验证，如果验证失败，提示错误，并返回 false

选择商品

初始化

var proSltDia = $.powerSelectDia({
    apiGetData: CONF.apiGetProList,
    title: '选择商品',
    listDataName: 'stockVoList',
    itemsStyle: { width: '100%' },
    selectMulti: true,//多选
    checkboxTpl: '<table class="table table-condensed">\
                    <thead><tr><th>选择</th><th>款号</th><th>商品信息</th><th>现售价</th><th>吊牌价</th><th>总库存</th></tr></thead>\
                    {{each data as item i}}\
                        <tr>\
                            <td><div class="checkbox sltdia-item checkbox-primary m0"><input id="d-{{item.id}}" class="j-dia-item"  data-id="{{item.id}}" type="checkbox" value="{{item.id}}"><label for="d-{{item.id}}" title="{{item.text}}"></label> </div></td>\
                            <td>[{{item.productCode || "无款号"}}]</td>\
                            <td>{{item.text | truncate:15}}</td>\
                            <td>￥{{item.minSkuPrice}}-￥{{item.maxSkuPrice}}</td>\
                            <td>￥{{item.marketPrice}}</td>\
                            <td>{{item.count}}</td>\
                            </tr>\
                    {{/each}}\
                </table>',
    searchTpl: '<div class="form-group"><div class="input-group"> <input type="text" class="form-control input-sm w150 j-sales-name" name="fuzzyName" placeholder="请输入商品名称或款号"> <span class="input-group-btn"> <button type="button" class="btn btn-primary btn-sm j-dia-search">筛选</button> </span> </div> </div>',
    getSearchPms: function($searchWrap) {
    //返回查询数据
        var keywords = $.trim($searchWrap.find('[name="fuzzyName"]').val());
        if (keywords.length > 80) {
            toastr.warning('输入信息过长');
            return false;
        }
        return {
            fuzzyName: keywords,
            supplyTypeList: '1_3',
            status: 0
        };
    },
    getItemsDataFn: function(data) {
    //返回列表需要的数据，可以自定义需要的数据，但一定要有id和text
        return data.map(function(v) {
            return {
                id: v.product.id,
                text: v.stock.productName || 'xxx',
                count: v.stock.count,
                productCode: v.product.productCode,
                minSkuPrice: v.minSkuPrice,
                maxSkuPrice: v.maxSkuPrice,
                marketPrice: v.stock.marketPrice,
            };
        })
    },
    okFn: function(chkRes) {
        if (chkRes.length) {
            //处理选择结果
        } else {
            toastr.error('请选择需要限制的商品');
            return false;
        }
    },
    cancelFn: function(chkRes) {
        if (!chkRes.length) {
            //处理没有选择中任何项的逻辑
        }
    }
});

打开选择框

1 2	//chkedData:如果是编辑，则为一个已经选择数组，如果是创建，则不用传或传一个空数组 proSltDia.show(chkedData);

选择门店

初始化

var storeSltDia = $.powerSelectDia({
  apiGetData: CONF.apiGetStoreList,
  title: '选择门店',
  listDataName: 'storeVoList',
  selectMulti: true,
  searchTpl: '<div class="form-group text-right"><div class="input-group"> <input type="text" class="form-control input-sm w150 j-sales-name" name="storeName" placeholder="店铺名称"> <span class="input-group-btn"> <button type="button" class="btn btn-primary btn-sm j-dia-search">筛选</button> </span> </div> </div>',
  getSearchPms: function($searchWrap) {
    var storeName = $.trim($searchWrap.find('[name="storeName"]').val());
    if (storeName.length > 80) {
        toastr.warning('输入信息过长');
        return false;
    }
    return {
        storeName: storeName,
        open:0
    };
  },
  getItemsDataFn: function(data) {
    return data.map(function(v) {
        return {
            id: v.store.id,
            text: v.store.name || 'xxx'
        };
    })
  },
  okFn: function(chkRes) {
    if (chkRes.length) {
        //处理选择结果
    } else {
        toastr.error('请选择需要限制的门店');
        return false;
    }
  },
  cancelFn: function(chkRes) {
    if(!chkRes.length){
      //处理选择为空时的逻辑
    }
  }
 });

显示对话框

1	storeSltDia.show(chkedStoreData)

选择品牌

初始化

var brandSltDia = $.powerSelectDia({
    apiGetData: CONF.apiGetBrandList,
    title: '选择品牌',
    listDataName: 'productBrandList',
    selectMulti: true,
    searchTpl: '<div class="form-group text-right"><div class="input-group"> <input type="text" class="form-control input-sm w150 j-sales-name" name="fuzzyKeyword" placeholder="品牌名称"> <span class="input-group-btn"> <button type="button" class="btn btn-primary btn-sm j-dia-search">筛选</button> </span> </div> </div>',
    getSearchPms: function($searchWrap) {
        var keywords = $.trim($searchWrap.find('[name="fuzzyKeyword"]').val());
        if (keywords.length > 80) {
            toastr.warning('输入信息过长');
            return false;
        }
        return {
            fuzzyKeyword: keywords
        };
    },
    getItemsDataFn: function(data) {
        return data.map(function(v) {
            return {
                id: v.id,
                text: v.brandName || 'xxx'
            };
        })
    },
    okFn: function(chkRes) {
        if (chkRes.length) {
            //处理选择结果
        } else {
            toastr.error('请选择需要限制的品牌');
            return false;
        }
    },
    cancelFn: function(chkRes) {
        if (!chkRes.length) {
            //处理选择为空的逻辑
        }
    }
     
});

显示

1	brandSltDia.show(chkedBrandData)

配置参数说明

基本配置【选填】

title: '请选择', //对话框标题
itemsNum: 30, //每页显示的数据条数
itemsBoxHeight: 210, //列表项盒子的高度
width: 750, //弹出层的宽度
height: 300, //弹出层的高度
selectMulti: false, //是否多选
showResult: false, //是否显示结果
okValue: '确定', //确认按钮文字
cancelValue: '取消', //取消按钮文字
itemsStyle: { width: '230px', display:'inline-block' }, //列表项的样式

数据获取配置【必填】

1
2
3

apiGetData: '', //【必填】获取数据的url
listDataName: '', //【必填】返回的数据对象名称
getItemsDataFn: $.noop, //【必填】返回列表项目数组，格式：[{id:1, text:'1号店'},{id: 2, text: '2号店'}]

查询配置【选填】

1
2
3

searchTpl: '', // 查询表单的模板, 没有则不添加搜索表单
searchBtnSlt: '.j-dia-search', //搜索按钮选择器，便于绑定查询事件
getSearchPms: $.noop, //返回查询参数的json对象，就是异步请求的数据, 参数是表单的jQuery对象

列表显示配置【选填】

//配置是 单选 时的展示模板
radioTpl: '{{each data as item i}}<div class="radio sltdia-item radio-primary"><input type="radio" class="j-dia-item" name="radio" id="d-{{item.id}}" data-id="{{item.id}}" value="{{item.id}}"> <label for="d-{{item.id}}" title="{{item.text}}">{{item.text | truncate:9}}</label></div>{{/each}}',
//配置是 多选 时的展示模板
checkboxTpl: '{{each data as item i}}<div class="checkbox sltdia-item checkbox-primary"><input id="d-{{item.id}}" class="j-dia-item"  data-id="{{item.id}}" type="checkbox" value="{{item.id}}"> <label for="d-{{item.id}}" title="{{item.text}}">{{item.text | truncate:9}}</label> </div>{{/each}}',
//显示 选择结果 的模板
checkResTpl: '{{each data as item i}}<span id="res-{{item.id}}">{{item.text}}、</span>{{/each}}',

回调函数配置

用于返回选择对话框选择的结果，如果 okFn 返回 false，则对话框不会关闭，可用于检查或限制用户选择项的数量

1
2
3

okFn: $.noop, //确定的回调，参数是选择的数据组成的数组
cancelFn: $.noop, //取消的回调，参数是选择的数据组成的数组
shownAfterFn: $.noop, //对话框显示之后的回调，可以注册一些事件，参数是对话框的jQuery对象

容器模板【选填】

contentTpl: '<div class="sltdia-inner">\
    <form class="sltdia-search form-inline j-dia-searchbox text-right mb10"></form>\
    <div class="sltdia-items j-dia-list"></div>\
    <div class="sltdia-page">\
        <div class="text-right">\
            <nav><ul class="pagination mt10 j-dia-page"></ul></nav>\
        </div>\
    </div>\
    <div class="sltdia-result" style="max-height:50px; overflow-y:scroll;"></div>\
    </div>'

方法Methods

1 2	dia.show(dataArr) //dataArr用于编辑时，传递已经选择的数据，格式为[{id:1, text:xxx}, {id:2,text:xxx},...]，如果是单选只传递具有一个元素的数据即可

洽客技术团队（QKED）

Talk is cheap, Show me the code.

web开发