bootstrap取得資料的實例程式碼-js教程-PHP中文網

首頁

web前端

js教程

bootstrap取得資料的實例程式碼

PHPz

Jul 02, 2017 am 09:27 AM

bootstrap數據獲取


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教程】

以上是bootstrap取得資料的實例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。

超越瀏覽器：現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制：1.通過Node.js實現服務器端編程，適用於高並發請求處理。 2.通過ReactNative進行移動應用開發，支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制，適用於硬件交互。

使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。首先，什麼是多租戶SaaS應用程序？多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。

JavaScript的演變：當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

神秘的JavaScript：它的作用以及為什麼重要Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。