如何通过 PHP 将序列化嵌套可排序数据保存到 MySQL 表？

Question

Can someone help me to save data from with below format to MySQL data in CodeIgniter?

data: "list[1]=null&list[7]=1&list[4]=1&list[5]=null&list[3]=5&list[2]=null&list[6]=2"

I have a MySQL table named as menu:

CREATE TABLE `menu` (
  `menu_id` int(11) NOT NULL,
  `menu_parent` int(11) NOT NULL,
  `menu_name` varchar(30) NOT NULL,
  `menu_url` varchar(60) NOT NULL,
  `menu_icon` varchar(50) NOT NULL,
  `menu_order` int(11) NOT NULL,
  `created` datetime DEFAULT NULL,
  `updated` datetime DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;


INSERT INTO `menu` (`menu_id`, `menu_parent`, `menu_name`, `menu_url`, `menu_icon`, `menu_order`, `created`, `updated`) VALUES
(1, 0, 'Data Master', 'javascript:void(0);', '', 1, '2020-08-23 01:49:55', '2020-08-23 10:11:00'),
(2, 0, 'Transaksi', 'javascript:void(0);', '', 4, '2020-08-23 01:49:55', '2020-08-23 10:11:00'),
(3, 1, 'Jenis Layanan', 'jenis-layanan', '', 6, '2020-08-23 01:49:55', '2020-08-23 10:11:00'),
(4, 1, 'Outlet', 'admin/outlet', '', 7, '2020-08-23 01:49:55', '2020-08-23 10:11:00'),
(5, 0, 'Data Konfigurasi', 'javascript:void(0);', '', 3, '2020-08-23 01:49:55', '2020-08-23 10:11:00'),
(6, 1, 'Menu', 'menu', '', 5, '2020-08-23 01:49:55', '2020-08-23 10:11:00'),
(7, 1, 'Jenis Jabatan', 'admin/jenis-jabatan', '', 2, '2020-08-23 01:49:55', '2020-08-23 10:11:00');

I use jQuery plugin nestedSortable to dynamically re-arrange the menu hierarchy and position as below:

$('ol.sortable').nestedSortable({
    disableNesting: 'no-nest',
    forcePlaceholderSize: true,
    handle: 'div',
    helper: 'clone',
    items: 'li',
    maxLevels: 3,
    opacity: .6,
    placeholder: 'placeholder',
    revert: 250,
    tabSize: 25,
    tolerance: 'pointer',
    toleranceElement: '> div'
});

This is the code to try saving to database:

$(document).on('click', 'a#ubahPosisi', function(){
    var serialized = $('ol.sortable').nestedSortable('serialize');
    $.ajax({
        type: 'POST',
        url: '<?php echo base_url('Menu/UpdatePosisiMenu');?>',
        data: {data:serialized},
        dataType: 'JSON',
        cache: false,
        success: function(response) {
        alert(response);
        }
    });
});

This my CI model for menu:

public function GetClientMenu($orderby = 'menu_order') {
    $query = $this->db->order_by($orderby, 'ASC')->get('menu');
    $arrData = $query->result();
    $arrTreeById = [];
    $arrChildIds = [];

    foreach($arrData AS $objItem) {
    $arrTreeById[$objItem->menu_id] = $objItem;
    $objItem->arrChilds = [];
    }

    foreach($arrTreeById AS $objItem) {
    if (isset($arrTreeById[$objItem->menu_parent])) {
        $arrTreeById[$objItem->menu_parent]->arrChilds[] = $objItem;
        $arrChildIds[] = $objItem->menu_id;
    }
    }

    array_walk($arrChildIds, function($val) use (&$arrTreeById) {
     unset($arrTreeById[$val]);
    });
    return $arrTreeById;
}

public function UpdatePosisiMenu($data = [], $id) {
    return $this->db->update('menu', $data, ['menu_id' => $id]);
}

And this is how I pass it to variable:

$this->data['menus'] = $this->m_menu->GetClientMenu('menu_order');

And, this is the view:

<ol class="sortable ui-sortable mjs-nestedSortable-branch mjs-nestedSortable-expanded">
    <?php if (count($menus) > 0): foreach ($menus as $menu):?>
    <li id="list_<?php echo $menu->menu_id;?>">
        <div class="menu-handle clearfix">
        <div class="menu-title pull-left">(<?php echo $menu->menu_id;?>) <?php echo $menu->menu_name;?></div>
        <div class="menu-option pull-right">
            <span><i class="glyphicon glyphicon-remove"></i></span>
        </div>
        </div>
        <?php if (count($menu->arrChilds) > 0):?>
            <ol class="submenu">
            <?php foreach ($menu->arrChilds as $submenu):?>
                <li id="list_<?php echo $submenu->menu_id;?>">
                    <div class="menu-handle clearfix">
                <div class="menu-title pull-left">(<?php echo $submenu->menu_id;?>) <?php echo $submenu->menu_name;?></div>
                <div class="menu-option pull-right">
                    <span><i class="glyphicon glyphicon-remove"></i></span>
                </div>
                </div>
            </li>
            <?php endforeach;?>
            </ol>
        <?php endif;?>
        </li>
    <?php endforeach; endif;?>
</ol>

And, lastly the CI controller to execute the saving:

public function UpdatePosisiMenu() {
    $data = $this->input->post(null);
        $sort = [];
        if (!empty($data)) {
        foreach ($data as $id => $ParentID) {
            $ParentID = ($ParentID === null) ? 0 : $ParentID;
            if (!array_key_exists($ParentID, $sort)) {
                $sort[$ParentID] = 1;
            }
            $this->m_menu->UpdatePosisiMenu(['menu_parent' => $ParentID, 'menu_order' => $sort[$ParentID]], $id);
            $sort[$ParentID]++;
        }           
    }   
}

And, I got this foreach error during saving:

A PHP Error was encountered
Severity: Warning
Message: Invalid argument supplied for foreach()
Filename: controllers/Menu.php
......

Answer 1

I fixed this issue with this update:

1. table schema still is the same

2. modification for the jQuery script:

    var menuarray; $('ol.sortable').nestedSortable({ disableNesting: 'no-nest', forcePlaceholderSize: true, handle: 'div', helper: 'clone', items: 'li', maxLevels: 5, opacity: .6, placeholder: 'placeholder', revert: 250, tabSize: 25, tolerance: 'pointer', toleranceElement: '> div', relocate: function(){ menuarray = $(this).nestedSortable('serialize'); console.log(menuarray); } }); $(document).on('click', 'a#ubahPosisi', function(){ $.ajax({ type: 'POST', url: '<?php echo base_url('Menu/UpdatePosisiMenu');?>', data: {data:menuarray}, dataType: 'JSON', cache: false, success: function(response) { if (response.success == true ) { window.location.reload(); } } }); });

3. create helpers that will be used to build the menu contents

   function prepareList(array $items, $pid = 0) { $output = array(); foreach ($items as $item) { if ((int) $item['menu_parent'] == $pid) { if ($children = prepareList($items, $item['menu_id'])) { $item['children'] = $children; } $output[] = $item; } } return $output; } function nav($menu_items, $child = false) { $output = ''; if (count($menu_items) > 0) { $output .= ($child === false) ? '<ol class="sortable">' : '<ol>' ; foreach ($menu_items as $item) { $output .= '<li id="list_' . $item['menu_id'] . '">'; $output .= '<div class="menu-handle clearfix">'; $output .= '<div class="menu-title pull-left">(' . $item['menu_id'] . ') ' . $item['menu_name'] . '</div>'; $output .= '<div class="menu-option pull-right"><span><i class="glyphicon glyphicon-remove"></i></span></div>'; $output .= '</div>'; if (isset($item['children']) && count($item['children'])) { $output .= nav($item['children'], true); } $output .= '</li>'; } $output .= '</ol>'; } return $output; }

4. modify the model code

   public function buildMenu() { $this->db->select('menu_id, menu_parent, menu_url, menu_name, menu_order'); $this->db->order_by('menu_parent, menu_order'); $menuItems = $this->db->get('menu')->result_array(); return prepareList($menuItems); }

5. grab the menu data in controller and view the menu contents in respective view file

   <?php echo nav($menus);?>

6. and finally the magic code to save the menu group or order as you wish

   public function UpdatePosisiMenu() { $data = isset($_REQUEST['data'])? $_REQUEST['data'] : ''; $status = ['success' => false]; parse_str($data, $arr); if (isset($arr['list'])) { array_walk($arr['list'], function(&$val, $key){ $this->m_menu->UpdatePosisiMenu(['menu_parent' => $val, 'updated' => date('Ymd H:i:s')], $key); }); $status['success'] = true; } echo json_encode($status); }

And, this is how it looks now:

( https://www.flickr.com/photos/189950440@N02/50283999368 )