bootstrap——疑难杂症总结

最新推荐文章于 2024-10-10 08:18:53 发布

七的不是海

最新推荐文章于 2024-10-10 08:18:53 发布

阅读量417

点赞数

文章标签：前端 bootstrap javascript

本文链接：https://blog.csdn.net/weixin_50478033/article/details/126569729

版权

1、bootstrapDualListbox的使用

@model MES.Model.T_SYS_TOUNIT
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <link href="~/Content/Bootstrap/css/bootstrap-3.3.7.css" rel="stylesheet" />
    <link href="~/Content/AdminLte/css/AdminLTE.css" rel="stylesheet" />
    <link href="~/Content/Bootstrap/css/bootstrap-duallistbox.css" rel="stylesheet" />
    <link href="~/Content/Select2/css/select2.min.css" rel="stylesheet" />
    <script src="~/scripts/jquery-1.10.2.js"></script>
    <script src="~/Content/Bootstrap/js/jquery.bootstrap-duallistbox.js"></script>
    <script src="~/Content/Select2/js/select2.min.js"></script>
    <title>Merge</title>
    <style>
        .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
            float: left;
        }

        .col-md-6 {
            width: 50%;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#scrapType").select2({
                language: "zh-CN"
            });

            $.getJSON("/ToUnit/GetMatrixing", function (data) {
                $('#scrapType').html('');
                $('#scrapType').append("<option value=''></option>");
                $.each(data, function (i, item) {
                    $('#scrapType').append("<option value='" + item.ENKEY1 + "'>" + item.ENKEY1 + "</option>");
                });
            });

            $("#scrapType").change(function () {
                document.getElementById("Iframe").src = "/ToUnit/GetMerge?type=" + $('#scrapType').val();
                //$("#bootstrap-duallistbox-nonselected-list_SelectMaterial").html('');
                //$.getJSON("/ToUnit/GetUnitAll", function (data) {
                //    $.each(data, function (i, item) {
                //        $('#bootstrap-duallistbox-nonselected-list_SelectMaterial').append("<option value='" + item.MATERIALID + "'>" + item.MATERIALID + "/" + item.MATERIALNAME + "</option>");
                //    });
                //});

                //demo2.bootstrapDualListbox('refresh');

                //$("#bootstrap-duallistbox-selected-list_SelectMaterial").html('');
                //$.getJSON("/ToUnit/GetMaterialByScrapType?type=" + $("#scrapType").val(), function (data) {
                //    $.each(data, function (i, item) {
                //        $('#bootstrap-duallistbox-selected-list_SelectMaterial').append("<option value='" + item.MATERIALID + "'>" + item.MATERIALID + "/" + item.MATERIALNAME + "</option>");
                //    });
                //});
            });
        });
    </script>
</head>
<body>
    <div class="container ">
        @using (Ajax.BeginForm("SaveMerge", "ToUnit", new AjaxOptions { }, new { @id = "DataForm", @class = "form-horizontal" }))
        {
            <div class="col-sm-6" style="margin-top:10px;float:right;">
                <label>合并换算名称：</label><select name="scrapType" id="scrapType" style="width:150px"></select>
            </div>
            <div class="col-sm-12">
                  <iframe src="/ToUnit/GetMerge?type=" name="Iframe" id="Iframe" width="100%" onload="this.height=Iframe.document.body.scrollHeight"></iframe>
            </div>
            @*<div class="col-sm-12" id="SELECTITEM">
                @Html.ListBox("SelectMaterial", ViewData["lstItem"] as IEnumerable<SelectListItem>, new { @id = "SelectMaterial", @class = "duallistbox input-sm", @multiple = "multiple" })
                <script>
                        var demo2 = $('.duallistbox').bootstrapDualListbox({
                            //nonSelectedListLabel: '可选用户',
                            //selectedListLabel: '已选用户',
                            preserveSelectionOnMove: 'moved',
                            moveOnSelect: true,
                            //nonSelectedFilter: 'ion ([7-9]|[1][0-2])',
                            //infoText: '选中/未选中用户共 {0} 项',
                            //infoTextFiltered: '从 {1} 项 筛选 {0} 项',
                            selectorMinimalHeight: 470,
                            //filterPlaceHolder: '过滤条件',
                            //moveAllLabel: '添加全部',
                            //moveSelectedLabel: '添加选中的',
                            //removeAllLabel: '移除全部',
                            //removeSelectedLabel: '移除选中',
                            //infoTextEmpty: '没有选中用户',
                        });
                </script>
            </div>*@
        }
    </div>
</body>
</html>

@model MES.Model.T_SYS_TOUNIT
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <link href="~/Content/Bootstrap/css/bootstrap-3.3.7.css" rel="stylesheet" />
    <link href="~/Content/AdminLte/css/AdminLTE.css" rel="stylesheet" />
    <link href="~/Content/Bootstrap/css/bootstrap-duallistbox.css" rel="stylesheet" />
    <link href="~/Content/Select2/css/select2.min.css" rel="stylesheet" />
    <script src="~/scripts/jquery-1.10.2.js"></script>
    <script src="~/Content/Bootstrap/js/jquery.bootstrap-duallistbox.js"></script>
    <script src="~/Content/Select2/js/select2.min.js"></script>
    <title>Merge</title>
    <style>
        .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
            float: left;
        }

        .col-md-6 {
            width: 50%;
        }
    </style>
</head>
<body>
    <div class="container ">
        <form id="DataIframe" class = "form-horizontal">
            <div class="col-sm-12">
                @Html.ListBox("SelectMaterial", ViewData["lstItem"] as IEnumerable<SelectListItem>, new { @id = "SelectMaterial", @class = "duallistbox input-sm", @multiple = "multiple" })
                <script>
                    var demo2 = $('.duallistbox').bootstrapDualListbox({
                        //nonSelectedListLabel: '可选用户',
                        //selectedListLabel: '已选用户',
                        preserveSelectionOnMove: 'moved',
                        moveOnSelect: true,
                        //nonSelectedFilter: 'ion ([7-9]|[1][0-2])',
                        //infoText: '选中/未选中用户共 {0} 项',
                        //infoTextFiltered: '从 {1} 项 筛选 {0} 项',
                        selectorMinimalHeight: 470,
                        //filterPlaceHolder: '过滤条件',
                        //moveAllLabel: '添加全部',
                        //moveSelectedLabel: '添加选中的',
                        //removeAllLabel: '移除全部',
                        //removeSelectedLabel: '移除选中',
                        //infoTextEmpty: '没有选中用户',
                    });
                </script>
            </div>
        </form>
    </div>
</body>
</html>

2、BootstrapTable的checkbox框实现默认全选

{
field: 'state', //id
checkbox: true, //checkbox
align: 'center', //水平对齐方式
valign: 'middle', //垂直对齐方式
formatter: function(value, row, index){
     return {
          checked: true
     }
}

3、BootStrapTable在某一列中动态实现开关按钮

//checkbox框
{
    field: 'status',
    title: '状态',
    formatter: project_status
}

function initSwitch(){
    $('#project_status_switch').bootstrapSwitch({
        onText : "启用",      // 设置ON文本  
        offText : "禁用",    // 设置OFF文本  
        onColor : "success",// 设置ON文本颜色(info/success/warning/danger/primary)  
        offColor : "warning",  // 设置OFF文本颜色 (info/success/warning/danger/primary)  
        size : "small",    // 设置控件大小,从小到大  (mini/small/normal/large)  
        // 当开关状态改变时触发  
        onSwitchChange : function(event, state) {  
            if (state == true) { 
                alert("ON");
            } else {
                alert("OFF");
            }  
         }  
    })
}

//状态栏格式化
function project_status(value, row, index) {
    //var result="";
    //result += "<input type='checkbox' id='project_status'>"
    //return "<div class='switch' id='mySwitch'><input type='checkbox' checked id='project_status_switch' name='mycheck'></div>";
    return "<input type='checkbox' checked id='project_status_switch' name='mycheck'>";
}