jq は html ページとデータを動的に分割する。

2022-02-08 17:12:47

I. jq による動的な html ページの分割

要求事項
1. ページのコンテンツが死んでいない
2. 背景データに基づいてページデータを動的にロードする

実装:

その前に、apppend()メソッドとhtml()メソッドの違いを理解する必要があります。
簡単に言うと append() メソッドは、要素のリストに要素を追加するものですが html() は、要素内のデータを置き換えることです。改ページを行う必要がある場合、そのような効果をナビゲートするのに最適な方法は html() メソッド

詳しくは、: append()とhtml()の違い

さっそく、コードを見てみましょう。

1. まず、動的に縫い合わせる必要がある親タグにidやクラス名を追加します。違いはあまりありません。

<body>
<div class="page">
    <div class="tab_line clearfix">
        <a class="tab_line_a" href="/reportPage?mainId=${mainId !} &year=${year !} &isFillIn=${mainId !} ">Quality of Care</a>
        <a class="tab_line_a" href="/reportPageOperate?mainId=${mainId !} &year=${year !} &isFillIn=${isFillIn !} ">operational efficiency</a>
        <a class="tab_line_a now_a">Continuous Development</a>
        <a class="tab_line_a" href="/reportPageSatisface?mainId=${mainId !} &year=${year !} &isFillIn=${isFillIn !} ">satisfaction</a>
    </div>
    <div class="templateArea">

    </div>
    <div class="bottom">
        <a href="/homepage" class="operation_line_button fr"> return</a>
        <div class="operation_line_button operation_line_button_blue fr save">save</div>
    </div>
</div>
</body>

2. ajax get data データとニーズに応じて、あなた自身のステッチプロセスを選択することができます以下は私の個人的なニーズのステッチです。
主な手順は以下の通りです。
a. ページを格納するための新しい変数を作成します。

var list=""

b.対応するページをリストに入れる入力が必要な場合は、list+="入力タグ" このような形式が主です。
c.そして最後に

$(".templateArea").append(list)

以上、3つのステップについて説明しましたが、要件はすべて異なるので、適宜変更するとよいでしょう。

function getTemplateList(param) {
        jQuery.ajax({
            url: systemBaseInterface + "/sustainedAdd/findSustainedTemplateList",
            type: "POST",
            cache: false,
            async: false,
            data: param,
            dataType: "json",
            success: function (data, text) {
                var list = "";
                for (var i = 0; i < data.data.length; i++) {
                    if (i == 0) {
                        list += "
\n"
 +
                                "                
"
 + data.data[i].content + "
"
 + ${year !} + "\n" +
                                " \n"
 +
                                " \n" +
                                " \n" +
                                " \n" +
                                " \n" +
                                " \n" +
                                " "
                    } else {
                        list += "
\n"
 +
                                "            
"
 + data.data[i].content + "\n" +
                                " \n" +
                                "\n"
 +
                                " \n" +
                                " \n" +
                                " \n" +
                                " \n" +
                                " \n" +
                                " "
                    }
                    jQuery.ajax({
                        url: systemBaseInterface + "/sustainedAdd/findSustainedTemplateList",
                        type: "POST",
                        cache: false,
                        async: false,
                        data: {"parentCode": data.data[i].code},
                        dataType: "json",
                        success: function (data, text) {
                            for (var j = 0; j < data.data.length; j++) {
                                var content = JSON.parse(htmlDecode(data.data[j].content))
                                if (content.threeType == "qualitative") {
                                    list += " \n" +
                                            " " + content.treeName + "\n" +
                                            " \n" +
                                            "                        

\n"
 +
                                            "                            
\n"
 +
                                            " + content.threeName + " data-code=" + data.data[j].code + " id=" + data.data[j].code + " data-count=" + data. data[j].isCount + " code=" + data.data[j].code + " class=\"dropdown_input normal result\" readonly=\"readonly\& quot; placeholder=\"please select\" style=\"cursor: auto;\">\n" +
                                            "                                
\n" +
                                            "                                
"

                                    for (var k = 0; k < content.option.length; k++) {
                                        list += " + k + 1 + ">" + content.option[k].xuanxiang + "\n"
                                    }
                                    list += " \n" +
                                            " \n" +
                                            " \n" +
                                            " \n" +
                                            " "
                                } else if (content.threeType == "quantitative") {
                                    for (var k = 0; k < content.tiojian.length; k++) {
                                        if (k == 0) {
                                            var kk = k + 1;
                                            list += " \n" +
                                                    " + content.tiojian.length + ">" + content.threeName + "\n" +
                                                    " + content.tiojian.length + ">\n" +
                                                    "                        
\n"
 +
                                                    " + data.data[j].isCount + " data-code=" + data.data[j].code + " data-name=" + content.threeName + " code=" + data.data[j].code + " id=\"value" + data.data[j].code + "_result\">\n" +
                                                    "                            
"
 + content.threeUnit + "\n" +
                                                    " \n" +
                                                    " \n" +
                                                    " " + content.tiojian[0].condition + "\n" +
                                                    " \n" +
                                                    "                        
\n"
 +
                                                    " + data.data[j].code + "_condition\" data-name=" + content.threeName + " data-count=" + data.data[j].isCount + " data-code=" + data.data[j].isCount + & quot; data-code=" + data.data[j].code + " code=" + data.data[j].code +"_"+kk +" οnkeyup='keyUp(data.data[j]. code,JSON.stringify(content.suanfa))' id=" + data.data[j].code +"_"+kk +">\n" +
                                                    "                            
"
 + content.tiojian[0].conditionUnit + "\n" +
                                                    " \n" +
                                                    " \n" +
                                                    " "
                                        } else {
                                            var kk = k + 1;
                                            list += "\n" +
                                                    " " + content.tiojian[k].condition + "\n" +
                                                    " \n" +
                                                    "                        

\n"
 +
                                                    " + data.data[j].code + "_condition\" data-name=" + content.threeName + " οnkeyup='keyUp(" + data.data[j].code + & quot;," + JSON.stringify(content.suanfa) + ")' data-code=" + data.data[j].code + " data-count=" + data.data[j]. isCount + " code=" + data.data[j].code +"_"+kk +" id=" + data.data[j].code +"_"+kk +">\n" +
                                                    "                            
"
 + content.tiojian[k].conditionUnit + "\n" +
                                                    " \n" +
                                                    " \n" +
                                                    " "
                                        }
                                    }
                                } else {
                                    list += "\n" +
                                            " " + content.threeName + "\n" +
                                            " \n" +
                                            "                        
\n"
 +
                                            " + content.threeName + " data-count=" + data.data[j].isCount + " data-code=" + data.data[j].code + " code=" + data.data[j].code=" + data.data[j].code + " id=" + data.data[j].code + " >\n" +
                                            "                            
"
 + content.threeUnit + "\n" +
                                            " \n" +
                                            " \n" +
                                            " "
                                }
                            }
                            list += "\n" +
                                    " "
                        }
                    })
                }
                $(".templateArea").append(list)
            }
        })
    }

以下は私のステッチコードです。私は3つのケースでステッチを行います。 これは間抜けなやり方ですが、バックエンドの開発者としては、時々思いつかないことがあれば、悪い解決策ではありません。

最後に、結果をお見せしましょう。

ここでは、まずヘッダーを読み込み、次に3つの異なるボックス（ドロップダウンボックス、入力ボックス、条件ボックス、結果ボックス）を読み込んでいます。

次に、Tencenttemplateはデータをラップします。

ここでは、データのテンプレートテンプレートエンジンフレームワークをカプセル化する他の方法の拡張子を与えるためにここでは、いくつかの変更の使用に基づいてテンセントテンプレートです。

を使っています。 template-native-3.0.1.js もし興味があれば、ソースコードを探して見てください
個人的には、こういうテーブルのようなループには、テンプレートがかなりイケてると思います（遠慮しないでください）
以下を使用します。
1. 最初のjsはバックエンドデータのリストを取得するテンプレートでラップする

 user.userData = function (param) {
        return $.ajax({
            url: systemBaseInterface + "/base/userData",
            data: param,
            failed: function (code, msg) {
                DiaLogBox.error(msg);
            },
            success: function (data) {
                template.loadData("user", data.data, function (ele) {
                    $(ele).show();
                    user.tableInit();
                });

                $("#userlist").setPager(data.data, function () {
                    user.userData(param);
                });
            }
        });
    };

2. 次に、次のようにページ上でメソッドを呼び出します。
ページの呼び出しは、いくつかの主要なステップに分かれています。
a.セット

template-name="the name you set in js"

b.データをループする(ここではページ分割しているのでリストにしています最終レベルはリストディレクトリで、あとはデータに応じてループしていきます)
c.データを入れるだけ

3. 結果は次のようになります。

最後に、template-native-3.0.1.jsのソースコードを置いておきますので、興味のある方は見てみてください。

!function () {
    function a(a) {
        return a.replace(t, "").replace(u, ",").replace(v, "").replace(w, "").replace(x, ""). split(/^$|,+/)
    }

    function b(a) {
        return "'" + a.replace(/('|\\\)/g, "\\\$1").replace(/\r/g, "\\\r").replace(/\n/g, "\\\n") + "'& quot;
    }

    function c(c, d) {
        function e(a) {
            return m += a.split(/\n/).length - 1, k && (a = a.replace(/\s+/g, " " ").replace(/

/g, "")), a && (a = s[1] + b(a) + s[2] + "\n"), a
        }

        function f(b) {
            var c = m;
            if (j ? b = j(b, d) : g && (b = b.replace(/\n/g, function () {
                return m++, "$line=" + m + ";"
            })), 0 === b.indexOf("=")) {
                var e = l && ! /^=[=#]/.test(b);
                if (b = b.replace(/^=[=#]? |[\s;]*$/g, ""), e) {
                    var f = b.replace(/\s*\([^\)]+\)/, "");
                    n[f] || /^(include|print)$/.test(f) || (b = "$escape(" + b + ")")
                } else b = "$string(" + b + ")";
                b = s[1] + b + s[2]
            }
            return g && (b = "$line=" + c + ";" + b), r(a(b), function (a) {
                if (a && !p[a]) {
                    var b;
                    b = "print" === a ? u : "include" === a ? v : n[a] ? "$utils." + a : o[a] ? "$helpers." + a : "$data." + a, w += a + "=" + b + ",", p[a] = !
                }
            }), b + "\n"
        }

        var g = d.debug, h = d.openTag, i = d.closeTag, j = d.parser, k = d.compress, l = d.escape, m = 1,
            p = {$data: 1, $filename: 1, $utils: 1, $helpers: 1, $out: 1, $line: 1}, q = "".trim,
            s = q ? ["$out='';", "$out+=", ";", "$out"] : ["$out=[];", "$out.push(", ");& quot;, "$out.join('')"],
            t = q ? "$out+=text;return $out;" : "$out.push(text);",
            u = "function(){var text=''.concat.apply('',arguments);" + t + "}",
            v = "function(filename,data){data=data||$data;var text=$utils.$include(filename,data,$filename);" + t + "}",
            w = "'use strict';var $utils=this,$helpers=$utils.$helpers," + (g ? "$line=0," : ""), x = s[0],
            y = "return new String(" + s[3] + ");";
        r(c.split(h), function (a) {
            a = a.split(i);
            var b = a[0], c = a[1];
            1 === a.length ? x += e(b) : (x += f(b), c && (x += e(c)))
        });
        var z = w + x + y;
        g && (z = " try{" + z + "}catch(e){throw {filename:$filename,name:'Render Error',message:e.message,line:$line,source:& quot; + b(c) + ".split(/\\n/)[$line-1].replace(/^\\s+/,'')};}");
        try {
            var A = new Function("$data", "$filename", z);
            return A.prototype = n, A
        } catch (B) {
            throw B.temp = "function anonymous($data,$filename) {" + z + "}", B
        }
    }

    var d = function (a, b) {
        return "string" == typeof b ? q(b, {filename: a}) : g(a, b)
    };
    d.version = "3.0.0", d.config = function (a, b) {
        e[a] = b
    };
    var e = d.defaults = {openTag: "<%", closeTag: "%>", escape: !0, cache: !0, compress: !1, parser: null},
        f = d.cache = {};
    d.render = function (a, b) {
        return q(a, b)
    };
    var g = d.renderFile = function (a, b) {
        var c = d.get(a) || p({filename: a, name: "Render Error", message: "Template not found"});
        return b ? c(b) : c
    };
    d.get = function (a) {
        var b;
        if (f[a]) b = f[a]; else if ("object" == typeof document) {
            var c = document.getElementById(a);
            if (c) {
                var d = (c.value || c.innerHTML).replace(/^\s*|\s*$/g, "");
                b = q(d, {filename: a})
            }
        }
        return b
    };
    var h = function (a, b) {
        return "string" ! = typeof a && (b = typeof a, "number" === b ? a += "" : a = "function" === b ? h(a.call(a)) : ""), a
    }, i = {"<": "<", ">": ">", '"': """, "'": "'", " quot;&": "&"}, j = function (a) {
        return i[a]
    }, k = function (a) {
        return h(a).replace(/&(?! [\w#]+;)|[<>"']/g, j)
    }, l = Array.isArray || function (a) {
        return "[object Array]" === {}.toString.call(a)
    }, m = function (a, b) {
        var c, d;
        if (l(a)) for (c = 0, d = a.length; d > c; c++) b.call(a, a[c], c, a); else for (c in a) b.call(a, a[c], c)
    }, n = d.utils = {$helpers: {}, $include: g, $string: h, $escape: k, $each: m};
    d.helper = function (a, b) {
        o[a] = b
    };
    var o = d.helpers = n.$helpers;
    d.onerror = function (a) {
        var b = "Template Error\n\n";
        for (var c in a) b += "<" + c + ">\n\n" + a[c] + "\n\n";
        "object" == typeof console && console.error(b)
    };
    var p = function (a) {
            return d.onerror(a), function () {
                return "{Template Error}"
            }
        }, q = d.compile = function (a, b) {
            function d(c) {
                try {
                    return new i(c, h) + ""
                } catch (d) {
                    return b.debug ? p(d)() : (b.debug = !0, q(a, b)(c))
                }
            }

            b = b || {};
            for (var g in e) void 0 === b[g] && (b[g] = e[g]);
            var h = b.filename;
            try {
                var i = c(a, b)
            } catch (j) {
                return j.filename = h || "anonymous", j.name = "Syntax Error", p(j)
            }
            return d.prototype = i.prototype, d.toString = function () {
                return i.toString()
            }, h && b.cache && (f[h] = d), d
        }, r = n.$each,
        s = "break,case,catch,continue,debugger,default,delete,do,else,false,finally,for,function,if,in,instanceof,new,null,return, switch,this,throw,true,try,typeof,var,void,while,with,abstract,boolean,byte,char,class,const,double,enum,export,extends,final, float,goto,implements,import,int,interface,long,native,package,private,protected,public,short,static,super,synchronized,throws, transient,volatile,arguments,let,yield,undefined",
        t = /\/\\*[\w\W]*? \*\/|\/\/[^\n]*\n|\/\/\/[^\n]*$|"(? :[^"\\\]|\\\[\w\W])*"|'(? :[^'\\]|\\[\w\W])*'|\s*\. \s*[$\w\.] +/g,
        u = /[^\w$]+/g, v = new RegExp(["\\b" + s.replace(/,/g, "\\b|\\\b") + "\\b"].join("|"), "g"),
        w = /^\d[^,]*|,\d[^,]*/g, x = /^,+|,+$/g;
    "function" == typeof define ? define(function () {
        return d
    }) : "undefined" ! = typeof exports ? module.exports = d : this.template = d
}();

III. 概要

私たちのページのカプセル化ページとデータのほとんどの時間は、実際には、ページが移動しないし、ループトラバーサルとデータのカプセル化しかし、あなたは需要のモンスターああを超えることはできませんしかし、スプライシングの言葉は、次のページで（）を追加し引き継ぐことは困難ではありません 3もハ〜に学ぶことができる。

jq は html ページとデータを動的に分割する。

I. jq による動的な html ページの分割

次に、Tencenttemplateはデータをラップします。

III. 概要

関連

vueネットワークリクエストソリューションネイティブネットワークリクエストとjsネットワークリクエストライブラリ

Vueの「データを聴く」原則を解説

Vueのフィルタの説明

[解決済み] Error : 未定義のプロパティ 'map' を読み取ることができません。

[解決済み】ReactJSでエラー発生 Uncaught TypeError: Super expression は null か関数でなければならず、undefined ではありません。

[解決済み】「.addEventListener is not a function」なぜこのエラーが発生するのか？

Uncaught TypeError: null のプロパティ 'offsetHeight' を読み取れませんでした。

JavaScriptのgetElementById、getElementsByTagNam、getElementsByClassNameの違いと使い方

JavaScriptのgetElementById()メソッド入門

jquery.ajaxのbeforeSendメソッド（プログレスバー、「お待ちください」プロンプトなどを解決する .............................）。

最新

nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)

htmlページでギリシャ文字を使うには

ピュアhtml+cssでの要素読み込み効果

純粋なhtml + cssで五輪を実現するサンプルコード

ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード

タイピング効果を実現するピュアhtml+css

htmlの選択ボックスのプレースホルダー作成に関する質問

html css3 伸縮しない画像表示効果

トップナビゲーションバーメニュー作成用HTML+CSS

html+css 実装サイバーパンク風ボタン

おすすめ

HTML+CSS+JavaScriptで簡単な三目並べゲームを作成する。

vueのグローバルがscss(mixin)を導入。

vueにおけるv-forループオブジェクトのプロパティ

Vueのイベント処理とイベントモディファイアの解説

[解決済み] 期待される代入または関数呼び出し: 未使用式なし ReactJS

[解決済み】ExpressJS : res.redirect()が期待通りに動かない？

[解決済み】React Uncaught Error: 対象コンテナが DOM 要素でない [重複]。

[解決済み】 Uncaught TypeError : undefined のプロパティ 'replace' を読み取れない In Grid

ローカルリソースのロードが許可されていない

フロントエンド - $(...) [0].attr は関数ではありません。