bootstrap-duallistbox的使用若依动态获取数据

最新推荐文章于 2023-07-01 10:48:02 发布

weixin_45553596

最新推荐文章于 2023-07-01 10:48:02 发布

阅读量1.3k

点赞数

分类专栏：若依文章标签： webview javascript html

本文链接：https://blog.csdn.net/weixin_45553596/article/details/122231921

版权

若依专栏收录该内容

1 篇文章 0 订阅

订阅专栏

数据库读取数据填充

互选组件属性，方法等了解：组件文档 | RuoYi

效果图：

代码

注意数据访问路径

<select> id值的修改

判断是否授权使用的status字段判断是否授权是使用<select>的value值是否等于1(根据个人需求做出相应的修改)

o.value o.id o.text根据自己的表字段进行相应的修改

<!DOCTYPE html>
<html lang="zh">
<head>
    <th:block th:include="include :: header('左右互选组件')" />
    <th:block th:include="include :: bootstrap-duallistbox-css" />
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox">
                <div class="ibox-content">
                    <form id="form" action="#" class="wizard-big">
                        <select id="agent_select" class="form-control dual_select" multiple>
                        </select>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-sm-offset-5 col-sm-10">
        <button type="button"  οnclick="closeItem()">取 消 </button>
        <button type="button"  οnclick="submitHandler()">保 存</button>
    </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: bootstrap-duallistbox-js" />
<!--<script th:src="@{/js/duallistbox.js}"></script>-->
<script type="text/javascript">
    //需要修改路径 字段名
    var page_agent_prefix = ctx + "ps/agent";
        $.ajax({
            url: page_agent_prefix+"/list",   //数据访问路径
            method: 'POST',
            data:{},/*{"agentName":"代理商1"}   需要传递参数时传参方式要使用json格式*/
            success:function (data){
                $(data.rows).each(function (){
                    var o = document.createElement("option");
                    o.innerHTML
                    var selector = $("#agent_select")[0];
                    o.value = this['status'];//为option标签添加value属性  使用的value判断的是否是已授权或者未授权    （以下都是实体类的对象）
                    o.id=this['agentId'];//为option标签添加id属性(用来提交给后台传递ID参数)
                    o.text = this['agentName'];//option标签显示的文字
                    if ("undefined" != typeof ("1") && "1" != "") {    //方法判断了status的值   此处status=1表示已经选中
                        var selectedDataArray = "1".split(',');
                        $.each(selectedDataArray, function (i, val) {
                            if (o.value == val) {
                                o.selected = 'selected';
                                return false;
                            }
                        });
                    }
                    if(typeof(selector) != "undefined") {
                        selector.options.add(o);
                    }
                });
                $('.dual_select').bootstrapDualListbox({
                    nonSelectedListLabel: '未授权代理商',
                    selectedListLabel: '已授权代理商',
                    preserveSelectionOnMove: 'moved',
                    moveOnSelect: false,           // 出现一个剪头，表示可以一次选择一个
                    filterTextClear: '展示所有',
                    moveSelectedLabel: "添加",
                    moveAllLabel: '添加所有',
                    removeSelectedLabel: "移除",
                    removeAllLabel: '移除所有',
                    infoText: '共{0}个',
                    showFilterInputs: false,       // 是否带搜索
                    selectorMinimalHeight: 160
                });
            }
        })

    function submitHandler(){
        var roomIds = $("#agent_select option").map(function(){
            if (this.value=="1")
            return $(this).attr("id");
        }).get().join(",");
        alert(roomIds)
        $.ajax({

        })
    }
    function closeItem(){
        var index=parent.layer.getFrameIndex(window.name); //获取当前窗口的name
        parent.layer.close(index);//关闭窗口
    }
</script>
</body>
</html>