Demo Multipicker | YFjs Library

双列选择框示例

基本示例

双列选择框需要通过 JavaScript 和一个 HTML 元素容器初始化内容。

<div id="multipicker"></div>

<script type="text/javascript">
$("#multipicker").multiPicker({
    fromColumn: {
        items: [
            "item1", "item2", "item3", "item4", "item5",
            "item6", "item7", "item8", "item9", "item10"
        ]
    },
    toColumn: {
        items: [
            "item_1", "item_2", "item_3", "item_4", "item_5"
        ]
    }
});
</script>

异步加载更多数据

双列选择框的可选列和已选列都支持通过配置项方法 loadMore 异步加载更多内容。

<div id="multipicker"></div>

<script type="text/javascript">
$("#multipicker").multiPicker({
    fromColumn: {
        items: [
            "item1", "item2", "item3"
        ],
        loadMore: function(num) {
            if (num >= 6) {
                this.doneMoreFrom();
                return false;
            }
            var def = $.Deferred();
            // 模拟异步 ajax
            setTimeout(function() {
                // 如果没有更多数据，可以 resolve(null) 或 resolve([])
                def.resolve([
                    "item1" + fromCount, "item2" + fromCount
                ]);
                fromCount ++;
            }, 1500);
            return def;
        }
    },
    toColumn: {
        items: [
            "item_1", "item_2", "item_3"
        ],
        loadMore: function(num) {
            if (num >= 6) {
                this.doneMoreTo();
                return false;
            }
            var def = $.Deferred();
            // 模拟异步 ajax
            setTimeout(function() {
                if (toCount > 2) {
                    // 如果请求数据失败，可以 reject(-1)
                    def.reject(-1);
                    toCount = 2;
                } else {
                    // 如果没有更多数据，可以 resolve(null) 或 resolve([])
                    def.resolve([
                        "item_1" + toCount, "item_2" + toCount
                    ]);
                    toCount ++;
                }
            }, 1500);
            return def;
        }
    }
});
</script>

高度限制

可以通过配置项 height、minHeight、maxHeight 限制双列选择框的高度。height 默认值为 'auto'，minHeight 默认值为 '300px'，maxHeight 默认值为 '400px'。默认 height 下，内容高度超出 maxHeight 时，将显示滚动条，内容高度小于 minHeight 时，将保持高度不变，不再自动适应。

<div id="multipicker"></div>

<script type="text/javascript">
$("#multipicker").multiPicker({
    minHeight: 220,
    maxHeight: 220,
    fromColumn: {
        items: [
            "item1", "item2", "item3", "item4", "item5",
            "item6", "item7", "item8", "item9", "item10"
        ]
    },
    toColumn: {
        items: [
            "item_1", "item_2", "item_3", "item_4", "item_5"
        ]
    }
});
</script>

使用更丰富的数据源

通过配置项 items 指定双列选择框的数据源时每项可以设为 String 类型或更丰富的 Object 类型。当设为 Object 类型时，必须含有属性 name，用以指定当前项的显示名称。

<div id="multipicker"></div>

<script type="text/javascript">
$("#multipicker").multiPicker({
    fromColumn: {
        items: [
            "item1", 
            {
                name: "item2",
                id: "2",
                key1: "value1"
            }, 
            {
                name: "item3",
                id: "3",
                key1: "value1"
            },
            "item4",
            "item5"
        ]
    }
});
</script>

获取数据信息

可以通过双列选择框提供的方法获取初始化时使用的数据，并通过配置项 dataSrc 过滤这些数据（只对 Object 类型的数据项有效）。

<div id="multipicker"></div>

<script type="text/javascript">
$("#multipicker").multiPicker({
    dataSrc: 'id',
    fromColumn: {
        items: [
            {
                name: "item1",
                id: "1",
                key1: "value1"
            }, 
            {
                name: "item2",
                id: "2",
                key1: "value1"
            }, 
            {
                name: "item3",
                id: "3",
                key1: "value1"
            }, 
            {
                name: "item4",
                id: "4",
                key1: "value1"
            }, 
            {
                name: "item5",
                id: "5",
                key1: "value1"
            }
        ]
    }
});

var unSelectData = $("#multipicker").multiPicker('getUnSelectedData');
// returns ['1', '2', '3', '4', '5']
</script>

如果想过滤多个属性值，可以将 dataSrc 设为一个数组。

<div id="multipicker"></div>

<script type="text/javascript">
$("#multipicker").multiPicker({
    dataSrc: ['id', 'key1'],
    fromColumn: {
        items: [
            {
                name: "item1",
                id: "1",
                key1: "value1"
            }, 
            {
                name: "item2",
                id: "2",
                key1: "value1"
            }, 
            {
                name: "item3",
                id: "3",
                key1: "value1"
            }, 
            {
                name: "item4",
                id: "4",
                key1: "value1"
            }, 
            {
                name: "item5",
                id: "5",
                key1: "value1"
            }
        ]
    }
});

var unSelectData = $("#multipicker").multiPicker('getUnSelectedData');
// returns [{id: '1', key1: "value1"}, {id: '2', key1: "value1"}, {id: '3', key1: "value1"}, {id: '4', key1: "value1"}, {id: '5', key1: "value1"}]
</script>

动态设置/更新数据

可以通过双列选择框的 setUnSelectedItems 或 setSelectedItems 方法动态设置待选列或已选列的数据源。

<div id="multipicker"></div>

<script type="text/javascript">
// 预先初始化双列选择框
$("#multipicker").multiPicker();
// 手动设置/更新待选列和已选列的数据
$("#multipicker").multiPicker('setUnSelectedItems', [
    "item1", "item2", "item3", "item4", "item5",
    "item6", "item7", "item8", "item9", "item10"
]);
$("#multipicker").multiPicker('setSelectedItems', [
    "item_1", "item_2", "item_3", "item_4", "item_5"
]);
</script>

事件回调

双列选择框组件提供了一些配置项方法，用以处理一些事件触发后的操作。

oncreated - 初始化双列选择框后触发。
onselected - 从待选列选择一项到已选列后触发。
ondeselected - 从已选列取消选择一项到待选列后触发。
onchanged - 选择或取消选择任一项后，已选列内容相对于初始化时有改变方触发。

--oncreated--
--onselected--
--ondeselected--
--onchanged--

<div id="multipicker"></div>

<script type="text/javascript">
$("#multipicker").multiPicker({
    fromColumn: {
        items: [
            "item1", "item2", "item3", "item4", "item5"
        ]
    },
    oncreated: function() {
        $('#multipicker-text-created').text('multipikcer created!');
    },
    onselected: function(evt) {
        var selectedData = this.getSelectedData();
        $('#multipicker-text-selected').text('select: ' + evt.data + '. selected: ' + selectedData.join(', '));
        var unSelectedData = this.getUnSelectedData();
        $('#multipicker-text-deselected').text('unselected: ' + (unSelectedData.join(', ') || 'NONE'));
        if (!this.isChanged()) {
            $('#multipicker-text-changed').text('--onchanged--');
        }
    },
    ondeselected: function(evt) {
        var unSelectedData = this.getUnSelectedData();
        $('#multipicker-text-deselected').text('deselect: ' + evt.data + '. unselected: ' + unSelectedData.join(', '));
        var selectedData = this.getSelectedData();
        $('#multipicker-text-selected').text('selected: ' + (selectedData.join(', ') || 'NONE'));
        if (!this.isChanged()) {
            $('#multipicker-text-changed').text('--onchanged--');
        }
    },
    onchanged: function(evt) {
        $('#multipicker-text-changed').text('change item: ' + evt.data);
    }
});
</script>