要件の説明
製品の追加ページでは、自動車モデルを選択する必要があります。使用するブートストラップモーダルに子供モーダルをポップアップします。
合計で4つのレベルのカタログがあります。ディレクトリツリーを使用します。
次に、アクティビティと商品の2つのタイプがあり、コンポーネントを非移動パラメーターで呼び出す必要があります。
自動車モデルブランドは、文字ナビゲーションを使用する必要があります。
テクノロジーの実装
データはバックエンドによってJSONに送信され、AJAXを取得してから操作します。
数万個以上の総車両モデルデータがあるため、一度にリクエストすることは不可能です。ここでは、非同期メソッドを使用し、それぞれディレクトリノードをクリックし、次のレベルをロードします。
ここでは、2つのパラメーターを使用して、アクティビティと製品のさまざまな負荷を制御します。 _showpriceとオープン
バックエンドから送信されるデータの最初のレベルはモデルブランドで、最初の文字があるフィールドがあります。文字ナビゲーションの初期化は、このデータをFirstWord属性でソートし、同じ初期文字を持つ他の要素を無視することです。
アクティビティタイプの場合、チェックされる最低レベルのデータを返す必要があります。 （アウディとアウディA6をチェックし、A6の意味のみが返されます）、ここでは完全な4層ループが使用されます。ただし、チェックされているかどうかに基づいて移動され、速度は遅くありません。
/*** 2016/5/23にNuenfengによって作成されました。 *モデル選択コンポーネント*パラメーター：*価格を入力するかどうか（価格を入力しないブランドのオプションボックスがあり、すべての機能がありません） // var _showpriceをリクエストするパラメーターshowprice = callback; //大きなモーダルボックス$（ '＃zc-sub-modal'） id = "_"> <span> str = "</li> sucture.html（str）; // $（ "＃resourceId"）。find（ "input [type = checkbox]" "） $（this）find（ "input [type = checkbox]：attr（" checked "、true）//}; } //}）; //}）; //チャイルドウィンドウ$（ "＃zc-sub-modal"）を隠した後、親ウィンドウをスクロールします。 } cartree.prototype.empty = function（）{open = false; console.log（ 'empty me'）; } // submenu var loadsubmenu = function（objid、carbrandid、times）をロードする{requestparams.brandid = carbrandid; executeajax（global.url.carbrandlist、requestparams、function（data）{//コケットの方法でデータを注文します。データ（keysrt（ "firstword"））; var menuhtml = "<ul>"; for（var index in data）{var menu = data [index]; menuhtml + = '<li id = " + menu.carbrandid + '"brand ="' + menu.brand + '">'; //価格付きのツリー（_showprice）{//最終レベル、オプションボックスを追加します（menu.level> 3）{menuhtml + = '<input type =" checkbox "name =" resourceIds ""' + '>' /'> + name + '< /span>'; + = '<Span>'Name +' </span> = "</li> =" </ul> " Navigation charnavarr = ''; 'cb _'+carnavarr.push（cobjtemp）; } //ここにいちゃつく配列オブジェクトソートvar keysrt = function（propertyname）{return function（object1、object2）{var value1 = object1 [propertyname]; var value2 = object2 [propertyName]; if（value2 <value1）{return 1; } else if（value2> value1）{return-; } else {return; }}} //イベントの保存var save = function（）{//確認後、コールバックfunctionを実行しますif（_showprice）{var res = getPriceresult（）; if（res.status）{_callback（res.data）; } else {alert（res.Error）;戻る; }} else {_callback（getnopriceresult（））; } //データを返し、$（ '＃zc-sub-modal'）を非表示にします。モーダル（ 'hide'）; } //文字ナビゲーション初期化var inityarnav = function（）{var charnavhtml = '<ul id = "charnavbar">'; for（var i in charnavarr）{charnavhtml+= '<li> <a href = "＃'+charnavarr [i] .targetid+'">'+charnavarr [i] .firstword+'</a> </li>'; } charnavhtml += '<li> <a>↑</a> </li>'; charnavhtml += '<button type = "button"> save </button>'; charnavhtml += '</ul>'; $（ '＃zc-sub-modal'）。append（charnavhtml）; $（ '。MODALGOTOP'）。 } // Statistics Price var getPriceresult = function（）{var result = {status：true、data：[]、error： ''}; var litemp; var objtemp; $（'。TreeView-Gray入力：チェックボックス：チェックボックス：checked '）。各（function（i）{litemp = $（this）.parent（' li '）; objtemp.carbrandid = litemp.attr（' value '）; objtemp.brand = litemp.attr（' brand（ 'ブランド）; litemp.find（ 'span'） objtemp.carbrandname '！返品結果; } //統計価格なしの返品データvar getnopriceresult = function（）{var result = []; var litemp; var objtemp; var flag1; var flag2; var flag3; var flag4; var levelname; // 4レイヤー$（ '＃cb _'）。子供（） {$（this）.is（ '：checked'））{false = true; $（this）.parent（）。children（ 'li'）。子供（ 'input：checkbox'）。各（function（i3）{if（$（this）.is（ '：checked'））{flag1 = false; false; fall2 = false; flag3 = true;} else {flag3 = false;} $（this）.Parent（）。 objtemp.carbrandid = litemp.attr = litemp.attr（ 'brand'）; litemp.text.push（objtemp）; //objtemp.carbrandname = litemp.Childre（） $（ 'li'）; objtemp.brand + '' + litemp.text（） litemp.attr（ 'value'）;返品結果; } //クリックイベント$（document）。 「オープン」（ 'ul'）。 //マルチチェックボックスをクリックするときにプルダウンしないでください（ 'クリック'、 '入力[type = "checkbox"]'、function（e）{e.StopPropagation（）;}）; window.cartree = cartree; }（））;呼び出し方法：
cartree = new cartree（false、{}、function（data）{console.log（data）;}）;上記は、編集者が紹介したブートストラップ実装ツリーディレクトリコンポーネントコードの詳細な説明に関する関連知識です。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！