Giter VIP home page Giter VIP logo

Comments (6)

Westsyan avatar Westsyan commented on July 2, 2024

你好，希望你能提供具体的示例代码方便我定位到问题，因为我的代码里模态框是正常的，demo.html添加模态框代码也可以正常显示。

from bootstrap-advanced-sortable.

jackieword avatar jackieword commented on July 2, 2024

HTML：

<div class="container-fluid">	
	<div class="row">	
		<div class="col-md-12">
			<div id="toolbar" style="margin-bottom: 20px;">
				<button class="btn btn-primary" id="btnRefresh">刷新</button>
				<button class="btn btn-primary" id="btnDel" data-toggle="modal" data-target="#delModal">删除</button>
			</div>
		</div>
		<div class="col-md-12">
            <form method="post" action="" class="form-horizontal" role="form" id="delForm" >
                <div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-labelledby="delModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                    x
                                </button>
                                <h4 class="modal-title" id="delModalLabel">
                                    删除信息
                                </h4>
                            </div>
                            <div class="modal-body">
                                <div class="group">
                                    <label class="col-sm-3">是否删除：</label>
                                    <div class="col-sm-9" id="usernameList">
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                                </button>
                                <button type="button" class="btn btn-primary" id="delBtn">
                                    提交
                                </button><span id="deltip"> </span>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
		<!-- Table Start-->
		<div class="col-md-12" style="margin-top: 20px;">
			<table id="data-table" class="table table-bordered" data-advanced-sortable="true" data-pagination="true">
			</table>
		</div>
		<!-- Table End-->
	<div>	
<div>

javascript:

$("#btnDel").on('click',function (){
    var list = $table.bootstrapTable('getSelections');
    $("#usernameList").children().filter("span").remove();//清空内容展示
    if(list.length>0){//判读是否有选中的数据
        var height = (Math.floor(list.length/5)>1?Math.floor(list.length/5):1)*50;
        $("#btnDel").attr("data-target","#delModal");
        $("#delForm").find("div[class='modal-body']").css({"height":height+"px"});
        for(var i = 0 ;i<list.length;i++){
            var msg  ="<span class='label label-primary' style='margin-left: 10px;'>"+list[i].name+"</span>"
            console.info(list[i]);
            $("#usernameList").append(msg);
        }

    }else{
        console.info("未选中");
        $("#btnDel").attr("data-target","");
    }

})

这样行吗:sob:

from bootstrap-advanced-sortable.

Westsyan avatar Westsyan commented on July 2, 2024

图片
代码没有问题，我成功跑通了，你可以看一下是不是被其它的样式或点击事件影响了。下面是我的测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link rel="stylesheet" media="screen" href="../dist/bootstrap/css/bootstrap.css">
<link rel="stylesheet" media="screen" href="../dist/bootstrap-table-master/css/bootstrap-table.css">
<link rel="stylesheet" media="screen" href="../dist/select2/css/select2.css">
<link rel="stylesheet" media="screen" href="../dist/bootstrap-advanced-sortable/css/bootstrap-advanced-sortable.css">

<script src="../dist/js/jQuery-3.2.1.js" type="text/javascript"></script>
<script src="../dist/bootstrap/js/bootstrap.js" type="text/javascript"></script>
<script src="../dist/bootstrap/js/bootstrap.bundle.js" type="text/javascript"></script>
<script src="../dist/bootstrap-table-master/js/bootstrap-table.js" type="text/javascript"></script>
<script src="../dist/select2/js/select2.js" type="text/javascript"></script>
<script src="../dist/bootstrap-advanced-sortable/js/bootstrap-advanced-sortable.js" type="text/javascript"></script>
<body>
<div style="margin:150px 200px">
    <div id="toolbar" style="margin-bottom: 20px;">
        <button class="btn btn-primary" id="btnRefresh">刷新</button>
        <button class="btn btn-primary" id="btnDel" data-toggle="modal" data-target="#delModal">删除</button>
    </div>
    <table id="table" class="table table-bordered" data-advanced-sortable="true"
           data-pagination="true" style="width: 1200px" data-click-to-select="true" >
        <thead>
        <tr>
            <th data-field="state" data-checkbox="true"></th>
            <th data-field="text" data-sortable="true" data-search-type="text">文本类型</th>
            <th data-field="num" data-sortable="true" data-search-type="num">数值类型</th>
            <th data-field="date" data-sortable="true" data-search-type="date">日期类型</th>
            <th data-field="radio" data-sortable="true" data-search-type="radio" data-search-select=["选项1","选项2"]>单选</th>
            <th data-field="checkbox" data-sortable="true" data-search-type="checkbox"
                data-search-select=["选项1","选项2","选项3","选项4","选项5"]>多选</th>
        </tr>
        </thead>
    </table>
</div>

<div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-labelledby="delModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    x
                </button>
                <h4 class="modal-title" id="delModalLabel">
                    删除信息
                </h4>
            </div>
            <div class="modal-body">
                <div class="group">
                    <label class="col-sm-3">是否删除：</label>
                    <div class="col-sm-9" id="usernameList">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary" id="delBtn">
                    提交
                </button><span id="deltip"> </span>
            </div>
        </div>
    </div>
</div>



<script>

    $(function () {
        let data = [];
        for (let i = 1; i < 100; i++) {
            data.push({
                text: "测试" + i,
                num: i,
                date: "2020-" + (i % 12 + 1) + "-5 1:10:10",
                radio: "选项" + (i % 2 + 1),
                checkbox: "选项" + (i % 5 + 1)
            })
        }
        $("#table").bootstrapTable({data: data})
    })

    $("#btnDel").on('click',function (){
        var list = $("#table").bootstrapTable('getSelections');
        $("#usernameList").children().filter("span").remove();//清空内容展示
        console.log(list)
        if(list.length>0){//判读是否有选中的数据
            var height = (Math.floor(list.length/5)>1?Math.floor(list.length/5):1)*50;
            $("#btnDel").attr("data-target","#delModal");
            $("#delForm").find("div[class='modal-body']").css({"height":height+"px"});
            for(var i = 0 ;i<list.length;i++){
                var msg  ="<span class='label label-primary' style='margin-left: 10px;'>"+list[i].text+"</span>"
                $("#usernameList").append(msg);
            }

        }else{
            console.log("未选中");
            $("#btnDel").attr("data-target","");
        }

    })

</script>
</body>
</html>

from bootstrap-advanced-sortable.

Westsyan avatar Westsyan commented on July 2, 2024

我就是用本项目的js跑的，你可以直接下载

from bootstrap-advanced-sortable.

jackieword avatar jackieword commented on July 2, 2024

老哥你修改了bootstrap的源码吗？

from bootstrap-advanced-sortable.

Westsyan avatar Westsyan commented on July 2, 2024

没有修改,如果还有问题你可以通过QQ联系我:12490421

from bootstrap-advanced-sortable.

Related Issues (9)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.