Example code for bootstrap to obtain data

nbsp;HTML>


    <meta>
    <meta>
    <meta>
    <title>通用增删改查</title>
    <link>
    <link>
    <link>
    <link>
    <link>
    <link>

    <link>


<div>
    <div>
        <a><i></i> 新增类型</a>
        <i></i> 编辑类型--%>
        <a><i></i> 删除类型</a>
    </div>
    <table></table>
</div>
<!-- 新增 -->
<div>
    <form>
        <div>
            <select>
                <option>请选择父级</option>
                <foreach>
                    <option>${type.title}</option>
                </foreach>
            </select>
        </div>
        <div>
            <label>标题</label>
            <input>
        </div>
        <div>
            <label>描述</label>
            <input>
        </div>

    </form>
</div>
<script></script>
<script></script>
<script></script>
<script></script>
<script></script>
<script></script>
<script></script>

<script></script>
<script>
    var $table = $(&#39;#table&#39;);
    var servlet_url = "/manage/type/index";
    $("#input1").val("ssss");
    $(function() {
        $(document).on(&#39;focus&#39;, &#39;input[type="text"]&#39;, function() {
            $(this).parent().find(&#39;label&#39;).addClass(&#39;active&#39;);
        }).on(&#39;blur&#39;, &#39;input[type="text"]&#39;, function() {
            if ($(this).val() == &#39;&#39;) {
                $(this).parent().find(&#39;label&#39;).removeClass(&#39;active&#39;);
            }
        });
        // bootstrap table初始化
        // 
        $table.bootstrapTable({
            url: servlet_url+&#39;?m=ajax_all&#39;,
            height: getHeight(),
            striped: true,
            search: true,
            searchOnEnterKey: true,
            showRefresh: true,
            showToggle: true,
            showColumns: true,
            minimumCountColumns: 2,
            showPaginationSwitch: true,
            clickToSelect: true,
            detailView: true,
            detailFormatter: &#39;detailFormatter&#39;,
            pagination: true,
            paginationLoop: false,
            classes: &#39;table table-hover table-no-bordered&#39;,
            //sidePagination: &#39;server&#39;,
            //silentSort: false,
            smartDisplay: false,
            idField: &#39;id&#39;,
            sortName: &#39;id&#39;,
            sortOrder: &#39;desc&#39;,
            escape: true,
            searchOnEnterKey: true,
            maintainSelected: true,
            toolbar: &#39;#toolbar&#39;,
            columns: [
                {field: &#39;state&#39;, checkbox: true},
                {field: &#39;id&#39;, title: &#39;编号&#39;,  halign: &#39;center&#39;,align:"center"},
                {field: &#39;title&#39;, title: &#39;标题&#39;,  halign: &#39;center&#39;,align:"center"},
                {field: &#39;pid&#39;, title: &#39;父级ID&#39;,  halign: &#39;center&#39;,align:"center"},
                {field: &#39;description&#39;, title: &#39;描述&#39;,  halign: &#39;center&#39;,align:"center"},
                {field: &#39;createTime&#39;, title: &#39;创建时间&#39;,  halign: &#39;center&#39;,align:"center",formatter: &#39;timeFormatter&#39;},

                {field: &#39;action&#39;, title: &#39;操作&#39;, halign: &#39;center&#39;, align: &#39;center&#39;, formatter: &#39;actionFormatter&#39;, events: &#39;actionEvents&#39;, clickToSelect: false}
            ]
        }).on(&#39;all.bs.table&#39;, function (e, name, args) {
            $(&#39;[data-toggle="tooltip"]&#39;).tooltip();
            $(&#39;[data-toggle="popover"]&#39;).popover();
        });
    });
    function timeFormatter(value,row,index){
        return new Date(row.createTime).format("yyyy-MM-dd hh:mm:ss");
    }
    function actionFormatter(value, row, index) {
        return [
            &#39;<a class="like" href="javascript:void(0)" data-toggle="tooltip" title="Like"><i class="glyphicon glyphicon-heart">　&#39;,
            &#39;<a class="edit ml10" href="javascript:void(0)" data-toggle="tooltip" title="Edit"><i class="glyphicon glyphicon-edit">　&#39;,
            &#39;<a class="remove ml10" href="javascript:void(0)" data-toggle="tooltip" title="Remove"><i class="glyphicon glyphicon-remove">&#39;
        ].join(&#39;&#39;);
    }
    window.actionEvents = {
        &#39;click .like&#39;: function (e, value, row, index) {
            alert(&#39;You click like icon, row: &#39; + JSON.stringify(row));
            console.log(value, row, index);
        },
        &#39;click .edit&#39;: function (e, value, row, index) {
            alert(&#39;You click edit icon, row: &#39; + JSON.stringify(row));
            //搞修改数据
            $("#input1").val(row.title);
            $("#input3").val(row.description);
            $("#selectpid").val(row.pid);
            alert($("#input1").val());
            $.confirm({
                title:"修改数据",
                content:function(){
                    var self = this;
                    var h = $("#createDialog").html();
                    self.setContent($("#createDialog").html());
                },
                buttons:{
                    confirm:{
                        text:"确定",
                        action:function(){
                            alert($(".jconfirm-content form input")[0].value)
                            //发送修改后的数据到服务器端，更新数据库
//                            $.post(servlet_url+"?m=update",{
//                                id:row.id,
//                                title:$(".jconfirm-content form input")[0].value,
//                                pid:$(".jconfirm-content form select")[0].value,
//                                description:$(".jconfirm-content form input")[1].value
//                            },function(txt){
//                                //服务器端响应内容回调函数
//                                $.alert(txt.message);
//                                $("#createDialog").html(ht);
//                                $table.bootstrapTable(&#39;refresh&#39;);
//                            },"json")
                        }
                    },
                    cancle:{
                        text:"取消",
                        action:function(){
                            $("#createDialog").html(ht);
                        }
                    }
                }
            })


            console.log(value, row, index);
        },
        &#39;click .remove&#39;: function (e, value, row, index) {
            removeByUniqueId = row.id;
            alert(&#39;You click remove icon, row: &#39; + JSON.stringify(row));
            $.confirm({
                title:"提示",
                content:"是否永久删除数据？",
                buttons:{
                    confirm:{
                        text:"确定",
                        action:function(){
                            //执行删除操作
                            $.get(servlet_url+"?m=delete",{&#39;id&#39;:row.id},function(txt){
                                $.alert(txt.message);

                                $table.bootstrapTable(&#39;refresh&#39;);
                            },"json");
                        }
                    },
                    cancle:{
                        text:"取消"
                    }
                }
            })
            console.log(value, row, index);
        }
    };
    function detailFormatter(index, row) {
        var html = [];
        $.each(row, function (key, value) {
            html.push(&#39;<p><b>&#39; + key + &#39;: &#39; + value + &#39;&#39;);
        });
        return html.join(&#39;&#39;);
    }
    // 新增
    var ht = $("#createDialog").html();
    function createAction() {

        $("#createDialog").html("");
        $.confirm({
            type: &#39;dark&#39;,
            animationSpeed: 300,
            title: &#39;新增系统&#39;,
            content: ht,
            buttons: {
                confirm: {
                    text: &#39;确认&#39;,
                    btnClass: &#39;waves-effect waves-button&#39;,
                    action: function () {

                        var t =$("#input1").val();
                        var desc = $("#input3").val();
                        var pid = $("#selectpid").val();
                        alert(t+"  "+desc);
                        if(t==""){
                            $.alert(&#39;标题不能为空&#39;);
                        }else{
                            $.get("/manage/type/index?m=add",{"title":t,"description":desc,"pid":pid},function(txt) {

                                $("#createDialog").html(ht);
                                $.confirm({
                                    title:"提示",
                                    content:txt.message,
                                    buttons: {
                                        confirm: {
                                            text: &#39;确认&#39;,
                                                    btnClass: &#39;waves-effect waves-button&#39;,
                                                    action: function () {
                                                            $table.bootstrapTable(&#39;refresh&#39;);
                                                        }
                                                }
                                        }
                                    });
                            },"json");
                        }

                    }
                },
                cancel: {
                    text: &#39;取消&#39;,
                    btnClass: &#39;waves-effect waves-button&#39;
                }
            }
        });
    }
    // 编辑
    function updateAction() {
        var rows = $table.bootstrapTable(&#39;getSelections&#39;);
        if (rows.length == 0) {
            $.confirm({
                title: false,
                content: &#39;请至少选择一条记录！&#39;,
                autoClose: &#39;cancel|3000&#39;,
                backgroundDismiss: true,
                buttons: {
                    cancel: {
                        text: &#39;取消&#39;,
                        btnClass: &#39;waves-effect waves-button&#39;
                    }
                }
            });
        } else {
            $.confirm({
                type: &#39;blue&#39;,
                animationSpeed: 300,
                title: &#39;编辑系统&#39;,
                content: $(&#39;#createDialog&#39;).html(),
                buttons: {
                    confirm: {
                        text: &#39;确认&#39;,
                        btnClass: &#39;waves-effect waves-button&#39;,
                        action: function () {
                            $.alert(&#39;确认&#39;);
                        }
                    },
                    cancel: {
                        text: &#39;取消&#39;,
                        btnClass: &#39;waves-effect waves-button&#39;
                    }
                }
            });
        }
    }
    // 删除
    function deleteAction() {
        var rows = $table.bootstrapTable(&#39;getSelections&#39;);
        if (rows.length == 0) {
            $.confirm({
                title: false,
                content: &#39;请至少选择一条记录！&#39;,
                autoClose: &#39;cancel|3000&#39;,
                backgroundDismiss: true,
                buttons: {
                    cancel: {
                        text: &#39;取消&#39;,
                        btnClass: &#39;waves-effect waves-button&#39;
                    }
                }
            });
        } else {
            $.confirm({
                type: &#39;red&#39;,
                animationSpeed: 300,
                title: false,
                content: &#39;确认删除该系统吗？&#39;,
                buttons: {
                    confirm: {
                        text: &#39;确认&#39;,
                        btnClass: &#39;waves-effect waves-button&#39;,
                        action: function () {
                            var ids = new Array();
                            for (var i in rows) {
                                ids.push(rows[i].systemId);
                            }
                            $.alert(&#39;删除：id=&#39; + ids.join("-"));
                        }
                    },
                    cancel: {
                        text: &#39;取消&#39;,
                        btnClass: &#39;waves-effect waves-button&#39;
                    }
                }
            });
        }
    }
    //原型链
    Date.prototype.format = function(fmt) {
        var o = {
            "M+" : this.getMonth()+1,                 //月份
            "d+" : this.getDate(),                    //日
            "h+" : this.getHours(),                   //小时
            "m+" : this.getMinutes(),                 //分
            "s+" : this.getSeconds(),                 //秒
            "q+" : Math.floor((this.getMonth()+3)/3), //季度
            "S"  : this.getMilliseconds()             //毫秒
        };
        if(/(y+)/.test(fmt)){
            fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
        }
        for(var k in o) {
            if(new RegExp("("+ k +")").test(fmt)){
              fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
            }
        }
        return fmt;
    }
</script>

【相关视频推荐：Bootstrap教程】

The above is the detailed content of Example code for bootstrap to obtain data. For more information, please follow other related articles on the PHP Chinese website!