mutiselect2side实现

最新推荐文章于 2021-08-30 10:56:40 发布

松风寒

最新推荐文章于 2021-08-30 10:56:40 发布

阅读量3k

点赞数

分类专栏： Web 文章标签： python javascript jquery multi2select

本文链接：https://blog.csdn.net/chinabjtueducn/article/details/23621823

版权

Web 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前一阵子弄mutiselect2side的框框，搞了好长一段时间，现在分享一下。初学者，大神勿吐槽。

mutiselect2side这个Jquery有插件，插件我改了一下，能好看一点，IE6的那个问题也改了。资源里搜一下select2side就行。

首先界面设计，其中使用了Bootstrap的class插件。

<!-- Dialog 批量选课模式框 -->
<div id="batchadd_dialog" class="modal hide fade width6" role="dialog">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <strong>批量选课</strong>
    </div>
    <div id="batchaddform">
        <div class="modal-body">
            <div class="form-group has-success">
                <input class="input-medium search-query" type="text" id="number_" name="number_" placeholder="学生学号或姓名">
                <button type="button" class="btn btn-info" οnclick="Add2Select()">待选</button>
                <span id="validstudent" class="text-error"></span>
            </div>
            <br>
            <table class="table table-bordered table-condensed search width5">
                <tr>
                    <td width="20%">课程号</td>
                    <td>
                        <input type="text" id="course_" name="course_" value="{{o.arrange.course.code}}" class="input-small" placeholder="请输入课程号/名">
                        <span id="validcourse"></span>
                    </td>
                </tr>
                <tr>
                    <td width="20%">课序号</td>
                    <td>
                        <input type="text" id="sequence_" name="sequence_" value="{{o.arrange.sequence}}" class="input-small" placeholder="请输入课序号">
                        <span id="validsequence"></span>
                    </td>
                </tr>
            </table>
            <br>
            <div id="select">
                <select multiple="multiple" id="stuselect" name="stuselect" size="8">
                </select>
            </div>
        </div>
        <div class="panel panel-primary">
            <span id="count"></span>
            <span id="message"></span>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" οnclick="OnSubmit()">添加</button>
            <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">取消</button>
        </div>
    </div>
</div>

其他对话框显示和数据转换是通过javascript和ajax进行，代码如下，需要在script中引入两个插件

<!-- multiselect2side Js and Css -->
<script type="text/javascript" src="/static/lib/jquery/jquery.multiselect2side.js"></script>
<link rel="stylesheet" type="text/css" href="/static/lib/jquery/jquery.multiselect2side.css" />

<script type="text/javascript">
    //批量选课相关操作
    $(document).ready(function(){
        autocomplete_course('course_', 'validcourse', 10);
        autocomplete_student('number_', 'validstudent', 10);

        // 批量选课对话框显示
        $("#batchadd").click(function(e){
            e.preventDefault();
            $("#batchadd_dialog").modal("show");
        });

        // multipselect2side 显示
        $("#stuselect").multiselect2side({
            selectedPosition: 'right',
            moveOptions:true,
            labelsx: '待选学生',
            labeldx: '已选学生',
        });
    });
    // 必选字段验证
    $("#batchaddform").validate({
        errorClass :"validate-error",
        rules:{
            course_:{
                required:true,
                remote:{
                    url:"/course/ajax_check_course/",
                    type:"get",
                    dataType:"json",
                    data:{
                        code:function(){return $("#course_").val();}
                    }
                }
            },
            sequence_:{
                required: true,
                digits:true,
                remote:{   
                        url: "/selection/ajax_check_arrange/", //后台处理程序    
                        type: "get",  //数据发送方式   
                        dataType: "json",       //接受数据格式       
                        data:  {
                            code:function(){return $("#course_").val()},
                            sequence:function(){return $("#sequence_").val()}
                        }
                    }
            }
        },
        //false 数据处理信息
        messages:{
            course_:{    remote:"课程不存在!" },
            sequence_:{  remote:"课序号不存在!"}
        }
    });

    // 通过学号搜索学生并返回学生信息，无相关信息输出错误提醒
    function Add2Select(){  
        $.ajax({
            url:"/census/ajax_get_student/", 
            dataType:"json",
            data:{'code':$("#number_").val()},
            type:"get",
            success:function(data){
                // 数据传到选择框备选框
                var json = eval(data);//数组  
                $.each(json, function (index, item) {  
                 //循环获取数据   
                    var code = json[index].code; 
                    var name = json[index].name;
                    var college_name = json[index].college_name;
                    $("#stuselectms2side__sx").append("<option value='"+code+"'><br>"+ name + "(" + code +"),("+college_name+")"+"<br/></option>"); 
                });
            },
        }); 
    };

    function OnSubmit(){
        var course = $("#course_").val();
        var sequence = $("#sequence_").val();
        var students;
        $("[name='stuselectms2side__dx[]']").each(function(){
            students = $(this).val();
        });
        $.ajax({
            url:"/supervise/selection/outcome/ajax_batchadd/",
            dataType:"json",
            data:{
                "course":course,
                "sequence":sequence,
                "students":students,
            },
            type:"get",
            success:function(data){
                $("#count").html(data.count+"人选课成功").css({color:'green'})
                $("#message").html("").css({color:"red"})
                if(data.ret != '')
                    $("#message").append(data.ret + "学籍不存在").css({color:'red'})
                if(data.msg != '')
                    $("#message").append(data.msg + "已选").css({color:'red'})
                if(data.cannot != '')
                    $("#message").append(data.cannot).css({color:'red'})
            }
        });
    }

</script>

autocomplete_course和autocomplete_student两个函数是两个自动查询完善的ajax函数。重点说明mulitselect2side，

<div id="select">
<select multiple="multiple" id="stuselect" name="stuselect" size="8">
</select>
</div>
是使用插件的语句，
// multipselect2side 显示
$("#stuselect").multiselect2side({
selectedPosition: 'right',
moveOptions:true,
labelsx: '待选学生',
labeldx: '已选学生',
});
是调用。
$("#stuselectms2side__sx").append("<option value='"+code+"'><br>"+ name + "(" + code +"),("+college_name
+")"+"<br/></option>");
是将语句写入左匡，左框插件中命名为XXXms2side__sx，右框命名为XXXms2side__dx[]，XXX为上面select中的名字，此处为

stuselect。
OnSubmit函数是提交后台处理，处理过程中模式框不消失。
var students;
$("[name='stuselectms2side__dx[]']").each(function(){
students = $(this).val();
});

是获取要提交的多个数据，保存在students变量中，数据通过ajax处理。
url:"/supervise/selection/outcome/ajax_batchadd/",
这个连接../outcome/是目前界面url，最后ajax_batchadd是数据处理函数，接收OnSubmit提交数据。
code = request.GET.get("course")
sequence = request.GET.get("sequence")
students = request.GET.getlist('students[]')
处理直接循环学生就行。
for student in students:
处理。。