• 周四. 5月 30th, 2024

5G编程聚合网

5G时代下一个聚合的编程学习网

热门标签

Asp.net MVC bootstrap 穿梭框

admin

11月 28, 2021

0.功能预览

1.前端Html代码:要引入
Vue.js
jquery.min.js

jqueryUi.js

queryUiTouch.js
bootstrap.min.js

 <div class="FormSystem ol-12 col-md-3">
                    @*<label for="lblOperator">保養人員</label>
                    <select id="selOperator" class="form-control" onchange=""></select>*@
                    <label id="lblConcurredApprover1">保養人員</label><span style="color: red" class="start">*</span>
                    <div class="input-group" id="divConcurredApprover1">
                        <input type="text" id="txtDept" disabled="disabled" placeholder="保養人員選擇" aria-label="保養人員選擇" oninput="TestDeptIDs()"
                               aria-describedby="basic-addon1"
                               data-panel="panel1" data-label="lblConcurredApprover1" data-div="divConcurredApprover1"
                               class="form-control mustEnter">
                        <div class="input-group-append">
                            <button type="button" class="btn  btn-primary inputButton concur"
                                    onclick="seletDept('txtDept'); return false;">
                                <i class="fas fa-search"></i>
                            </button>
                        </div>
                        <div style="display: none;">
                            <input type="text" id="selecteditem1" value="[]" />
                        </div>
                    </div>
                </div>    

<!--穿梭框-->
<div class="modal fade" id="transferBox" style="display:none">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title fontBold" id="modelTitle">{{title}}</h4>
                <button type="button" class="close" data-dismiss="modal">×</button>
            </div>
            <!-- Modal body -->
            <div class="modal-body">
                <div class="modalContent">
                    <div class="mfsTitle" v-show="IsShowSearchBlock">
                        <div class="input-group">
                            <input id="input1" type="text" aria-label="Text input with dropdown button" class="form-control" v-model="searchtext" v-on:keydown="onSearchTextKeyDown">
                            <div class="input-group-append ">
                                <button type="button" class="btn btnBlue inputButton rounded" v-on:click="onBtnSearchClick"><i class="fas fa-search"></i></button>
                            </div>
                        </div>
                    </div>
                    <div class="transferBoxSection">
                        <div>
                            <div class="h4 fontBold clearfix">
                                <button class="btn btnBlue float-right m-0 transferredAll"
                                        data-transfer-from="#transferA" data-transfer-to="#transferB" v-show="IsShowSelectAll" v-on:click="onTransferAllClick">
                                    Select All
                                </button>
                            </div>
                            <ul id="transferA" class="moveable transferSortable">
                                <li class="ui-state-default" v-for="sitem in sourceItems" data-dept-id="sitem.DEPTID">{{sitem.Text}}({{sitem.Value}})</li>
                            </ul>
                        </div>
                        <div class="btnInCenter">
                            <button v-on:click="onTransferClick" data-transfer-from="#transferA" data-transfer-to="#transferB" class="btnBlue" v-show="IsShowRight"><i class="fas fa-arrow-right" style="margin: auto;" data-transfer-from="#transferA" data-transfer-to="#transferB"></i></button>
                            <button v-on:click="onTransferClick" data-transfer-from="#transferB" data-transfer-to="#transferA" class="btnBlue" v-show="IsShowLeft"><i class="fas fa-arrow-left" style="margin: auto;" data-transfer-from="#transferB" data-transfer-to="#transferA"></i></button>
                        </div>
                        <div>
                            <div class="h4 fontBold clearfix">
                                <button class="btn btnBlue float-right m-0 untransferredAll"
                                        data-transfer-from="#transferB" data-transfer-to="#transferA" v-show="IsShowCancelAll" v-on:click="onTransferAllClick">
                                    Delete All
                                </button>
                            </div>
                            <ul id="transferB" class="moveable transferSortable">
                                <li class="ui-state-default" v-for="titem in selectItems" data-dept-id="titem.DEPTID">{{titem.Text}}({{titem.Value}})</li>
                            </ul>
                        </div>
                    </div>
                    <div class="center">

                        <button class="btnBlue okBtn btn" id="btnSelectDeptOk" v-on:click="onBtnOkClick" v-show="IsShowOK">OK</button>
                        <button class="btnWhite btn" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

2.JS代码

<script type="text/javascript">
    function seletDept(controlName) {
        var txtObj = $('#' + controlName);//txt obj
        var selectJsonObj = (txtObj.data('obj') ? txtObj.data('obj') : '[]');//已經選定的人員,第一次時為空
        var title = txtObj.attr('placeholder'); //要顯示的彈跳視窗title
        var datasource = "";
        var deptName = $('#input1').val();
        $.ajax({
            url: '@Url.Action("GetQStaffList")',
            type: 'post',
            data: {
                deptName: deptName
            },
            dataType: "text",
            async: false,
            success: function (data) {
                var obj = JSON.parse(data);
                datasource = JSON.stringify(obj);
            }
        });
        $transfervm.Init(title, '', function (item) {
            var txt = "";
            //選擇框內容
            $("#transferB li").each(function () {
                var self= $(this);
                txt += self.text() + ";";
            });
            txtObj.val(txt);
            return true;
        }, null, datasource, selectJsonObj, false)
    }

    var $transfervm = new Vue({
        el: "#transferBox",
        mounted: function () {
            $("#transferA, #transferB").sortable({
                connectWith: ".transferSortable"
            }).disableSelection();
            $("#transferA, #transferB").on("sortreceive", this.onSortReceiveEvent);
            $("#transferB").on("sortstop", this.refreshData);
            $(".transferSortable").on("click", "li", function () {
                $(this).toggleClass("selected");
            });
        },
        data: function () {
            return {
                title: "",
                searchtext: "",
                IsShowSelectAll: true,
                IsShowCancelAll: true,
                IsShowLeft: true,
                IsShowRight: true,
                IsShowSearchBlock: true,
                IsShowOK: true,
                IsDisableSearch: false,
                Single: false,
                ButtonOKClick: null,
                ButtonSearchClick: null,
                sourceItems: [],
                selectItems: []
            }
        },
        watch: {
            Single: function () {
                this.IsShowSelectAll = this.IsShowCancelAll = !this.Single;
            },
            selectItems: function (value) {
            }
        },
        methods: {
            onBtnOkClick: function () {
                try {
                    if (typeof this.ButtonOKClick === "function") {
                        if (this.ButtonOKClick(this.selectItems))
                            $("#transferBox").modal('hide');
                    }
                    else {
                        $("#transferBox").modal('hide');
                    }
                    //TestDeptIDs()
                }
                catch (e) {
                    alertError('Run OK Button', e.message);
                }
                return setReturnFalse();
            },
            onSearchTextKeyDown: function (event) {
                if (event.keyCode === 13) {
                    this.onBtnSearchClick();
                    return setReturnFalse();
                }
            },
            onBtnSearchClick: function () {
                //$("#transferBox").modal('hide');
                this.IsDisableSearch = false;
                if (!this.IsDisableSearch) {
                    this.IsDisableSearch = !this.IsDisableSearch;
                    var deptName = $('#input1').val();
                    var datasource = "";
                    //部門
                    $.ajax({
                        url: '@Url.Action("GetQStaffList")',
                        type: 'post',
                        data: {
                            deptName: deptName
                        },
                        dataType: "text",
                        async: false,
                        success: function (data) {
                            this.sourceItems = [];
                            this.selectItems = [];
                            var obj = JSON.parse(data);
                            datasource = JSON.stringify(obj);

                            //this.IsDisableSearch = !this.IsDisableSearch;
                        }
                    });
                    this.sourceItems = JSON.parse(datasource);
                    //this.selectItems = JSON.parse([]);
                    //$("#transferBox").modal('hide');
                    //$("#transferBox").modal('show');
                }
                return setReturnFalse();
            },
            onSortReceiveEvent: function (event, ui) {
                var from;
                var to;
                if (ui.sender[0].id === "transferA") { from = "#transferA"; to = "#transferB"; }
                else { from = "#transferB"; to = "#transferA" }
                //單選檢查
                if (!this.IsCanSelect(from)) {
                    $("#transferA").sortable("cancel");
                    ui.item.removeClass("selected");
                }
                // 判斷是否存在TO
                if ($(to).find('li[data-dept-id="' + ui.item.data("deptID") + '"]').length === 2) {
                    //如果B->A 就移除B
                    if (from === "#transferB")
                        ui.item.remove();
                    else
                        $(from).sortable("cancel");
                }
                this.refreshData();
            },
            onTransferAllClick: function (e) {
                e.preventDefault();
                var from = $(e.target).data('transferFrom');
                var to = $(e.target).data('transferTo');
                $(from).find('li').each(function () {
                    if ($(to).find('li[data-dept-id="' + this.dataset.DeptID + '"]').length === 0) {
                        $(to).append($(this).removeClass("selected"));
                    }
                    else {
                        if (from === "#transferB") $(this).remove();
                    }
                });
                this.refreshData();
            },
            onTransferClick: function (e) {
                e.preventDefault();
                var from = $(e.target).data('transferFrom');
                var selitem;
                var temp;
                var to = $(e.target).data('transferTo')
                // 判斷單選
                //if (!this.IsCanSelect(from)) return;//from === "#transferA" && !this.IsCanSelect() && $(from).find('.selected').length === 1) return;
                // 判斷是否存在TO 如果B->A 就移除B
                $(from).find('.selected').each(function () {
                    $(to).append($(this).removeClass("selected"));
                });
                this.refreshData();
            },
            refreshData: function () {
                var v = this;
                var Aitems = $('#transferA li');
                var Atemp = [];
                var Bitems = $('#transferB li');
                var Btemp = []; //var s = 'po'; s.format('{0}{1}', 's', 't');
                alertError(s);
                $.each(Aitems, function (ndex, item) {
                    var aitemValue = getParenthesesStr(item.innerText);
                    Atemp.push(v.sourceItems.filter(x=> x.Value == aitemValue)[0]);

                });
                v.sourceItems = Atemp;
                //if (v.selectItems.length > 0) {
                $.each(Bitems, function (ndex, item) {
                    var bitemValue = getParenthesesStr(item.innerText);
                    Btemp.push(v.selectItems.filter(x=> x.Value == bitemValue)[0]);
                });
                v.selectItems = [];
                v.selectItems = Btemp;
                //}
            },
            IsCanSelect: function (from) {
                if (from === "#transferA") {
                    if (this.Single && this.selectItems.length === 1) {
                        alertError("Only Select One");
                        return false;
                    }
                    if (this.Single && $(from).find('.selected').length > 1) {
                        alertError("Select Too Many");
                        return false;
                    }
                }

                return true;
            },
            Init: function (strtitle, strsearchtext, okfn, searchfn, sourcedata, selectdata, issingle) {
                if (strtitle)
                    this.title = strtitle;

                this.IsDisableSearch = false;

                if (typeof issingle === "boolean")
                    this.Single = issingle;
                if (typeof okfn === "function") {
                    this.ButtonOKClick = okfn;
                }

                if (typeof searchfn === "function") {
                    this.ButtonSearchClick = searchfn;
                }
                else {
                    //預設查詢 先用CC的
                }
                if (strsearchtext)
                    this.searchtext = strsearchtext;
                else
                    this.searchtext = "";

                this.sourceItems = [];
                this.selectItems = [];
                try {
                    this.sourceItems = JSON.parse(sourcedata)
                }
                catch (e) {
                }
                try {
                    this.selectItems = JSON.parse(selectdata)
                }
                catch (e) {
                }

                $("#transferBox").modal('show');
            }
        }

    });

    //獲取部門id 測試demo
    function TestDeptIDs() {
        var tempdeptids = $('#txtDept').val().split(';');
        var deptids = [];
        $.each(tempdeptids, function (ndex, item) {
            if (item != '') {
                deptids.push(getParenthesesStr(item));
            }
        });
        alertError(deptids.length);
    }



    var setReturnFalse = function () {
        if (event) {
            if (event.preventDefault) { event.preventDefault(); }
            try { event.returnValue = false; } catch (e) { }
        }
        return false;
    };
    //獲取小括號內的字符串
    function getParenthesesStr(text) {
        var re = /([^)]+)/g
        var s = text;
        s = s.match(re)[0];
       return s = s.substring(1, s.length - 1);
    }
    String.prototype.format = function (args) {
        if (arguments.length > 0) {
            var result = this;
            if (arguments.length == 1 && typeof (args) == "object") {
                for (var key in args) {
                    var reg = new RegExp("({" + key + "})", "g");
                    result = result.replace(reg, args[key]);
                }
            } else {
                for (var i = 0; i < arguments.length; i++) {
                    if (arguments[i] == undefined) {
                        return "";
                    } else {
                        var reg = new RegExp("({[" + i + "]})", "g");
                        result = result.replace(reg, arguments[i]);
                    }
                }
            }
            return result;
        } else {
            return this;
        }
    }
</script>
var tempdeptids = $('#txtDept').val().split(';');         
            var operData = [];
            $.each(tempdeptids, function (ndex, item) {
                if (item != '') {
                    operData.push(getParenthesesStr(item));
                }
            });
            $.ajax({
                url: '@Url.Action("Action")',
                data: {operData:operData},
                dataType: "json",
                type: "post",
                async: false,
                success: function (data) {
                    if (data.errorMsg) {
                        flag = false;
                        alertError(data.errorMsg);
                    }
                    else {
                        var msgs = (data.okMsg);
                        flag = true;
                        alertError(msgs);
                    }
                },
                error: function (data) {
                    if (data.errorMsg) {
                        flag = false;
                        alertError(data.errorMsg);
                    }
                    else { alertError("請重新打開或刷新本頁面後重試!"); }
                },
                complete: function () {
                }
            });

3.后端代码

 [HttpPost]
        public ActionResult Action(List<string> operData)
        {          
            try
            {
                bool result = mtWorkTimeBLL.Save(operData);
                string okMsg = string.Empty;
                if (result)
                {
                    okMsg = "保存成功!";
                }
                else
                { okMsg = "保存失敗!"; }
                var jsonOK = new
                {
                    okMsg
                };
                return Json(jsonOK);
            }
            catch (Exception ex)
            {
                var jsonEx = new
                {
                    errorMsg = ex.ToString()
                };
                return Json(jsonEx);
            }          
        }

欢迎转载,转载请注明出处:http://www.cnblogs.com/Tonyyang/

《Asp.net MVC bootstrap 穿梭框》有一个想法
  1. Wow, marvelous weblog format! How lengthy have you ever been running a blog for?
    you made blogging look easy. The entire look of your
    web site is fantastic, let alone the content
    material! You can see similar here sklep online

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注