如何使用 jQuery Nestable 插件和 Codeigniter 创建子菜单?

2024-05-01

我在用着jQuery 可嵌套插件 with 代码点火器 3为网站创建 5 级菜单,这是一个很好的解决方案,用户可以通过拖放来更改菜单项的级别和位置。然而,我的下面的函数只能创建第一级菜单,当我更改为菜单项的子级(2,3,4,5)时,它对我不起作用。

Issue我无法将菜单项从一级更改为另一级。我无法将菜单项反转回Parent如果我已经改变它是children of any parent。无论 Jquery Nestable 正在运行什么,它都会起作用。

下面的函数用于将菜单项更新到数据库,该数据库取决于 菜单栏如:id, 父ID, m_order.

该函数将检查内部$List数组依据foreach and 数组键存在如下描述:

  1. 从中获取数组数据form使用 $this->get_child($this->input->post('list'));
  2. Using Foreach and 数组键存在函数来检查任何孩子们 of $List数组,如果找到的话children它将按照下面的 CI 函数更新到数据库。
  3. 和这个if ($parent_id != $item['id']) {...}不会更新父 ID对于当前的id父母的。

    public function savelist() {
    
        if ($this->input->post('list')) {
            $this->do_update($this->input->post('list'));
        }
    }
    
    public function do_update($list, $parent_id = 0, &$m_order = 0) {
    
        foreach ($list as $item) {
    
            $m_order++;
            $data = array(
                'parent_id' => $parent_id,
                'm_order' => $m_order,
            );
            if ($parent_id != $item['id']) {
    
                $where = array('id' => $item['id']);
                var_dump($data . ':' . $where);
                $this->db->where($where);
                $this->db->update('nav', $data);
            }
            if (array_key_exists("children", $item)) {
                $this->do_update($item["children"], $item["id"], $m_order);
            }
        }
    }
    

这个 Jquery Nestable 插件和 Ajax 功能用于将任何表单数据发送到服务器。

<script>
        $(document).ready(function () {

            var updateOutput = function (e) {
                var list = e.length ? e : $(e.target), output = list.data('output');
                $.ajax({
                    method: "POST",
                    url: "savelist",
                    data: {
                        list: list.nestable('serialize')
                    }, success: function (data) { //, textStatus, jqXHR
                        console.log(list.nestable('serialize'));
                    }
                }).fail(function (jqXHR, textStatus, errorThrown) {
                    alert(" Unable to save new list order: " + errorThrown);
                });
            };
            $('#nestable').nestable({
                group: 1,
                maxDepth: 7,
            }).on('change', updateOutput);
        });
    </script>

然而我已经只创建了一张表来存储所有菜单项。我做了一个条件PHP检查Parent and Children当菜单id equal to 父ID这是我的表结构

CREATE TABLE IF NOT EXISTS `nav` (
  `id` int(10) NOT NULL AUTO_INCREMENT,
  `uid` int(10) NOT NULL,
  `text` varchar(500) NOT NULL,
  `link` text NOT NULL,
  `show_condition` int(5) NOT NULL,
  `parent_id` int(5) NOT NULL,
  `m_order` int(9) NOT NULL,
  `class` varchar(50) NOT NULL,
  `data` varchar(50) NOT NULL,
  `des` text NOT NULL,
  `lang` varchar(50) NOT NULL,
  `accord` int(3) NOT NULL,
  `footer` int(3) NOT NULL,
  `f_sta` int(3) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=9 ;

最后我得到了如下图所示的菜单编辑器,它让我只能更改一级操作系统菜单。


我有和你一样的要求,看看我的代码,它几乎和你的一样,

这是我的控制器:

public function select_menu_priority() {
        $data['product'] = $this->menu_model->select_menu_priority();

        $data['li'] = $this->generate_li($data['product']);

        $this->load->view("set_menu_priority_table", $data);
    }

function generate_li($product,$parent = NULL){

        $li = "";

        $p1 = array_filter($product, function($a)use($parent){ return $a['parent_menu_id'] == $parent; });

        foreach ($p1 as $p){

            $inner_li = "";

            $p2 = array_filter($product,function($a)use($p){ return $a['parent_menu_id'] == $p['id']; });

            if($p2){
                $inner_li = $this->generate_li($product,$p['id']);
            }

            $li .= "<li class='dd-item' data-id='".$p['id']."'><div class='dd-handle'>".$p['title']."</div>".$inner_li."</li>";

        }

        $ol = "<ol class='dd-list'>".$li."</ol>";

        return $ol;
    }

查看set_menu_priority_table.php:

<?php
if (isset($product)) {    
    $entity = $this->input->post("entity");
    $entity = $entity['id'];
    if (count($product) > 0) {
        ?>
        <div class="row-fluid" style="margin-bottom: 10px;">
            <button class="btn btn-success btn-sm" tabindex="4" id="save">
                <i class="fa fa-check"></i> Save
            </button>
            <p class="pull-right" style="margin-bottom: 10px;"><?php if ($entity == "product") { ?><a href="javascript:void(0)" id="show_category" class="text-success" style="margin-right:10px;font-weight: bold;text-decoration: underline">Go to Category Priority</a><?php } ?><span class="label label-info ">Drag Menu to set Priority.</span></p>            
            <div class="clear"></div>
        </div>
        <div class="dd" id="product_list">
            <input type="hidden" id="entity_type" name="entity" value="<?php echo $entity ?>" />    
            <?php echo $li; ?>
        </div>
    <?php } else { ?>        
        <p><span class="label label-warning">No <?php echo ($entity == "product") ? "product" : "category"; ?> found.</span><?php if ($entity == "product") { ?><a href="javascript:void(0)" id="show_category" class="text-success" style="margin-left:15px;font-weight: bold;text-decoration: underline">Go to Category Priority</a><?php } ?></p>            
        <?php
    }
} else {
    ?>
    <p class="label label-info">Please select Category to Set Priority within the Category.</p>
<?php } ?>

<script type="text/javascript">
$("#save").off("click").on("click", function() {
            var product_data = $("#product_list").nestable("serialize");
            var data = {product_data: product_data, entity: $("#entity_type").val()};
            if ($.bbq.getState("product_category") !== undefined) {
                data['product_category'] = $.bbq.getState("product_category");
            }
            ajax_call({
                url: '<?php echo site_url("admin/menu/update_menu_priority");?>',
                type: "post",
                dataType: "json",
                data: data,
                beforeSend: function() { },
                success: function(result) {
                    if (result['status'] == "success") {
                        alert("Priority Updated!");
                    } 
            });
        });
</script>

对于更新优先级添加功能update_menu_priority在控制器中:

public function update_menu_priority() {
            $data = $this->input->post("product_data");
            if (count($data)) {
                $update = $this->menu_model->update_priority_data($data);
                if ($update) {
                    $result['status'] = "success";
                } else {
                    $result['status'] = "error";
                }
            } else {
                $result['status'] = "error";
            }
            echo json_encode($result);

    }

最后是广告模型功能update_priority_data:

function update_priority_data($data, $parent = NULL) {
        $i = 1;
        foreach ($data as $d) {
            if (array_key_exists("children", $d)) {
                $this->update_priority_data($d['children'], $d['id']);
            }
            $update_array = array("priority" => $i, "parent_menu_id" => $parent);
            $update = $this->db->where("id", $d['id'])->update("menu", $update_array);
            $i++;
        }
        return $update;
    }

我希望这对你有帮助, 谢谢。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 jQuery Nestable 插件和 Codeigniter 创建子菜单? 的相关文章

  • 用PHP动态生成二维码[关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我正在尝试在我的网站上生成二维码 他们所要做的就是在其中包含一个 URL 我网站上的变量将提供该 URL
  • 正确的标头 php mysql blob 显示图像

    我正在尝试在我的 PHP 页面中显示来自 mysql blob 的图像 我知道这不是最佳实践 然后我会将其引入我的 iOS 应用程序中 我在设置页面标题时遇到问题 我认为需要将其设置为图像 所以 这显示了图像 但我不相信页眉是正确的 hea
  • PHP 中的抽象类是什么?

    PHP 中的抽象类是什么 如何使用 抽象类是至少包含一个抽象方法的类 该方法中没有任何实际代码 只有名称和参数 并且已被标记为 抽象 这样做的目的是提供一种模板来继承并强制继承类实现抽象方法 因此 抽象类是介于常规类和纯接口之间的东西 此外
  • Opencart 的 $this->config->get('module_var_name')

    我正在尝试自定义 Opencart 支付模块 我看到很多地方都使用了配置信息 但我找不到任何创建正在使用的变量的内容 我知道在管理页面中 如果我选择 paypal 标准 我可以设置所有 配置 信息 但我找不到强调它的 模型 是否有模型 我希
  • 如何在jquery.repeater中仅在slideUp完成后执行下一个代码

    这是原始代码 this slideUp deleteElement itemRemove 上面的代码在 SlideUp 完成之前调用 itemRemove 所以我使用了如下回调函数 this slideUp deleteElement fu
  • PHP别名@函数

    我是 PHP 新手 看到一些使用 前缀调用函数 如 mysql ping 的示例 我感到很困惑 它是做什么用的 谷歌搜索 搜索没有太大帮助 因为 被丢弃并且 别名 不是足够好的关键字 抑制错误 警告和通知 如果你用自定义的方式补充它 你可以
  • 如何使用php在mysql数据库中添加照片? [关闭]

    这个问题不太可能对任何未来的访客有帮助 它只与一个较小的地理区域 一个特定的时间点或一个非常狭窄的情况相关 通常不适用于全世界的互联网受众 为了帮助使这个问题更广泛地适用 访问帮助中心 help reopen questions 我对 PH
  • PHP 负面因素不断增加

    我这里有这个代码 remaining 0 foreach clientArrayInvoice as key gt row remaining remaining row total 它的作用是 它获取总计值并将它们相加 但是当我有负值时
  • jQuery 中的 Javascript .files[0] 属性

    jQuery 中是否有与此语句等效的语句 var value document getElementById id files 0 使用附加 files 0 的标准 jQuery 选择器似乎不起作用 并且我找不到与 files 等效的 jQ
  • Jquery ajax请求,等待最新请求完成

    我有一个文本框 每次用户输入一个字母时 我都会使用 ajax 请求进行搜索 并为用户 实时 显示结果 通常 当用户键入字母时 发出请求所需的时间比用户输入新字母所需的时间更长 因此在第一个请求结束之前发出新请求 如果第一个请求能够在我执行下
  • 计算Javascript中两次点击之间的时间

    我想用 javascript 计算属性的两次点击之间的时间 但我不知道如何 例如 a href click here a 如果用户单击多次 假设 5 秒内 我想显示警报 如果有帮助的话我正在使用 jQuery 我对 javascript 不
  • 我应该使用排队系统来处理付款吗?

    我在用着Slim https www slimframework com和这个结合Stripe 的 PHP 库 https stripe com docs api php在我的应用程序中处理付款 一切都很好 但是直到最近 我在我的系统中发现
  • 用数组反向查找对象

    假设我有一个这样的对象 resourceMap a 0 1 2 3 4 5 6 7 8 9 10 b 11 12 c 21 23 d 54 55 56 57 510 确定是否的最佳方法是什么resourceId 21将会 c 我们不知道钥匙
  • 使用 jquery 将字符串数组转换为整数

    我正在尝试将 jquery 中的字符串数组转换为整数数组 这是我的尝试 var cdata data values split each cdata function i l l parseInt l 我认为在这种情况下你不需要使用 Jqu
  • jQuery 选择下一个

    我有一个简单的div布局html 有一个函数 当鼠标悬停在className为 personal icon email 的div上时 我将调用JS函数并显示className为 img info mask 的隐藏div div class
  • PHP 中的简单 JSON 请求

    我有以下 json country code latitude 45 9390 longitude 24 9811 zoom 6 address city country Romania country code RO region 我只想
  • 如何使 jQuery 向上动画

    我有一些 jquery 运行得相当好 但是当我将鼠标悬停在有问题的元素上时 底部向下扩展 这并不意外 但不是所需的效果 我希望元素的底部保持静止 而元素的顶部向上扩展 如果您想查看我目前拥有的内容 您可以导航至http demo ivann
  • 如何在 PHP >= 5.3 严格模式下向对象添加属性而不产生错误

    这必须很简单 但我似乎找不到答案 我有一个通用的 stdClass 对象 foo没有属性 我想添加一个新属性 bar尚未定义 如果我这样做 foo new StdClass foo gt bar 1234 严格模式下的 PHP 会抱怨 将属
  • Jquery:选择菜单以显示和隐藏某些div元素

    我正在创建一个选择菜单 根据所选选项显示和隐藏某些 div 像这样的东西
  • 当选择下拉列表中的某些值时,取消选中复选框

    当我从下拉列表中选择某个值或用户未从下拉列表中选择任何值时 我需要取消选中复选框 我现在正在使用 Jquery 这是我现在使用的代码 但它不起作用 Script

随机推荐