💍 😬 👩‍🎓 階層リストをプログラムに入力する 💇🏻 🚶🏿 🖌️

階層リスト要素（KLADRなど）をWebアプリケーションに導入するというタスクがありました。

drupalを使用していたとき、この機能を実装する階層選択モジュールがありました。
しかし、私はそれを自分でやりたかった-私が完全に理解していないシステムに接続されないようにするために、一般的には興味深い。

既存のシステムに結び付けられていない既製のソリューションを検索すると、次のような結果が得られました。
これは適合しませんでした。

トピックは新しく、特に実行するのが難しいふりをしていません。
2時間で死亡しました。
共有したかった。
おそらく誰かが役に立つでしょう。
可能な限り、すべてが文書化され、データソースを記述する関数は2つの方法で取り出されました。
-親による子（1レベル）の検索
-階層内の子のすべての親を検索
誰でも必要に応じて使用できるように。

おそらくそのようなものがどこかにあったが、すぐにそれを見つけられなかった。
それでは始めましょう。

実例とソースコードへの直接リンク
例

データソースにすばやく書き換えることができます（クラスの2つのメソッドを変更するだけです）

問題文：

動的に生成された選択セットを使用する
ノードを選択すると、子を持つ別の要素がロードされます。
ユーザーがツリーをさらに移動したり、子を選択せずにこのノードを選択できるようにするには
要素がすでに選択されていて編集する必要がある場合、選択したノードへのパスを含む要素のセットをロードする必要があります
つまり、初期化する
ページのリロードなしの生成-ajax
異なるタイプの多くの階層リストが存在する可能性があり、それらは競合しないはずです

モジュールごとの機能：

必要なすべてのデータを含むコンテナビュー
変更に応答し、その場で生成された要素を要求するjavaScript
動的コンテンツ作成モジュール

プレゼンテーションの順序：

接続先のアプリケーションが生成する必要がある必要十分なデータを説明する
JavaScriptの説明
Ajaxリクエストを処理するクラス
すべての仕組み
結果処理

1.アプリケーションで必要なこと

JavaScript jQueryを接続します
および階層処理スクリプト

<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="script.js"></script>

ページのリストごとに：

 <!-- *    class=select_hierarhy_container *   id  *     ,    ( ) * old  new   ,           ,     --> <div class=select_hierarhy_container id=field_1> <input type=hidden name=field_1[old] value=""/> </div>

ajax.phpファイルをサイトのルートにコピーします

2. javaScriptの説明

 //  $(document).ready(function() { /** *          */ $('.select_hierarhy_container').each(function() { selecHierarhyInit(this); }); }); /** *  ,     . : * id (containerId),    (initValue)     * ,    * * @param v_container * - */ function selecHierarhyInit(v_container) { var container = $(v_container); var containerId = container.attr('id'); var initValue = container.children('input').val(); container.load('ajax.php?container_id=' + containerId + '&init_id=' + initValue); } /** *          v_obj,  *      : id  * (containerId)        (level) *    (parent_id)      * ,   (  ,     *  )      * * @param v_obj *    select,   */ function selecHierarhygetChilds(v_obj) { obj = $(v_obj); var containerId = obj.parents('.select_hierarhy_container').attr('id'); var parent_id = obj.val(); obj.nextAll().remove(); $.ajax({ url : 'ajax.php?container_id=' + containerId + '&parent_id=' + parent_id, success : function(data) { $('#' + containerId).append(data); } }); }

3. Ajaxリクエストを処理するクラス

 /** * ,     . * *          * $_POST[$selectName]    .   - . *     (,    ) *        *     (  ) *  ,  ,    * * @author dibrovsd */ class HerarhySelect { //  select- private $selectName; /** * @param string $selectName  select-,    */ public function __construct($selectName) { $this->selectName = $selectName; } /** *    * @param int $parentId    */ public function getContent($parentId) { return $this->generateSelect($parentId); } /** *     *    ,     * ( ) *    ,   *   ( )   ,    ,  * @param int $nodeId   */ public function getInit($nodeId) { if($nodeId == '') { return $this->getContent(-1); } else { $s = null; $parents = $this->getDataParentsList($nodeId); foreach($parents as $parentId => $childId) { $s .= $this->generateSelect($parentId, $childId); } $s .= $this->generateSelect($nodeId); return $s; } } /** *     $parentId,    $childId * @param int $parentId    * @param int $childId */ private function generateSelect($parentId, $childId = null) { //    -  $childs = $this->getDataChilds($parentId); if($childs == null) { return; } $s = '<select name='.$this->selectName.'[new][] onChange="selecHierarhygetChilds(this);"> <option></option>'; foreach($childs as $id => $value) { $s .= '<option value="'.$id.'" '. ($id == $childId ? 'selected' : '').'>'. $value.'</option>'; } $s .='</select>'; return $s; } /** *  .   - *    *     * *      . *      , web- *  -  (   ) * * @param int $parentId    */ private function getDataChilds($parentId) { $dataSource = $this->getDataArray(); if(!isset($dataSource[$parentId])) { return null; } else { return $dataSource[$parentId]; } } /** *       , *     $childId *    -      *    ,   -    * *  (   )      *       *       : *  Oracle  , *  PostgreSQL   *     ,     * (       ) * * @param int $child * @return int:int id  : id , *       , *   */ private function getDataParentsList($childId) { $dataSource = $this->getDataArray(); $result = array(); $currentChild = $childId; //      . //    ,     do { $isParentFind = false; foreach($dataSource as $idParent => $childs) { if(isset($childs[$currentChild])) { $result[$idParent] = $currentChild; $isParentFind = true; $currentChild = $idParent; break; } } } while($isParentFind); return array_reverse($result, true); } /** *  -    . *    ,  ,  , *     , *     */ private function getDataArray() { return array( -1 => array(1 => 'test1', 2 => 'test2', 3 => 'test3'), 1 => array(4 => 'test1_1', 5 => 'test1_2', 6 => 'test1_3'), 4 => array(7 => 'test2_1', 8 => 'test2_2', 9 => 'test2_3'), 9 => array(10 => 'test2_1_1', 11 => 'test2_1_2', 12 => 'test2_1_3') ); } }

4.すべての仕組み

ドキュメントモデルが完全に形成されているときにページを読み込むと、
JavaScript初期化コードが起動します
そして、コンテナごとに初期化データをロードします
selecHierarhyInit関数（container_object）を使用する

この関数は、
-コンテナ識別子。入力要素の名前と同じです
-階層ノードの初期化識別子

PHPクラスは、getInit（$ id）関数でこの識別子を受け取り、処理します。
空の場合、階層のルートに従属するノードのリストで1つのレベルをロードします（「スタブ」-1を使用します）
そうでない場合は、初期化ノードから階層をスキャンし、結果の辞書を反転します。
「ロールダウン」を受け取り、配列を印刷に渡します
次に、このコンテンツ（リストのリストまたは1つのリスト）がjavaScriptに返され、コンテナに書き込まれます。
不要になった初期化値を削除する

オペレーターがselectを変更すると、selecHierarhygetChilds関数が呼び出され、パラメーターを受け取ります
変更されたリストのオブジェクト、そこからパラメータを選択します：
変更後のすべてのリストを削除し、
なぜなら、親、彼の子供たちが再び再建される必要があるからです
これに関してPHP getContent（id）に子ノードのリストを要求し、その後に結果を追加します（すべての子が削除されました）
変更されたリスト

5.結果の処理
コメントなし

 if(isset($_POST['sendForm'])) { $data1 = array_reverse($_POST['field_1']['new']); $data2 = array_reverse($_POST['field_2']['new']); $val1 = $data1[0] == '' ? $data1[1] : $data1[0]; $val2 = $data2[0] == '' ? $data2[1] : $data2[0]; } else { $val1 = null; $val2 = 12; }

階層リストをプログラムに入力する

More articles: