مرجع تخصصی برنامه نویسان

انجمن تخصصی برنامه نویسان فارسی زبان

کاربر سایت

morteza373

عضویت از 1394/10/30

مشکل هنگام افزودن گره جدید در jstree در پروژه ای با asp.net mvc

  • چهارشنبه 20 دی 1396
  • 11:21
تشکر میکنم

سلام خسته نباشید

من دارم یه پروژه با mvc مینویسم که در اون از jstree  برای مدیریت دسته بندی ها استفاده کردم

مشکل اینجاس که وقتی یه گره جدید اضافه میکنم و نامی برای اون گره مینویسم ، نام جدید در دیتابیس ذخیره نمیشه و نام پیش فرض اون یعنی newNode در دیتابیس ذخیره میشه ، به عبارت دیگر

اول گره ایجاد میشه و اطلاعات اون در دیتابیس ذخیره میشه و بعد نام اون به نامی که من وارد میکنم تغییر داده میشه که دیگه تو دیتابیس ذخیره نمیشه و با رفرش صفحه نام گره میشه newNode.

اینم کد های سمت کلاینت :

@{
    ViewBag.Title = "Grouping";
    Layout = "~/Views/Shared/_Layout.cshtml";
    var doJsTreeOperationUrl = Url.Action(actionName: "DoJsTreeOperation", controllerName: "Admin");
    var getTreeJsonUrl = Url.Action(actionName: "GetTreeJson", controllerName: "Admin");
}


<div class="row page-info-Ribbon">
    <div class="col-md-12 col-sm-12 padding-5 border-r-5 white-bg">
        <span class="padding-5 blue font-Arka">O</span>
        <a href="/Admin/dashboard">پنل مدیریتی</a>
        <span class="padding-5 blue font-Arka">O</span>
        <a href="/Admin/Grouping">مدیریت دسته ها</a>
    </div>
</div>
<div id="row-grouping" class="row padding-20 ">
    <div id="col-grouping" class="col-md-12 bg-white">
        <div class="grouping-title">مدیریت دسته ها</div>

        <div id="jstree">
        </div>
    </div>
</div>
@section scripts
{
    <script type="text/javascript">

        function postJsTreeOperation(operation, data, onDone, onFail) {
            $.post('@doJsTreeOperationUrl',
                {
                    'operation': operation,
                    'id': data.node.id,
                    'parentId': data.node.parent,
                    'position': data.position,
                    'text': data.node.text,
                    'originalId': data.original ? data.original.id : data.node.original.id,
                    'href': data.node.a_attr.href
                })
                .done(function (result) {
                    onDone(result);
                })
                .fail(function (result) {
                    alert('failed.....');
                    onFail(result);
                });
        }



        $(function () {
            var selectedData;

            $('#jstree').jstree({
                "core": {
                    "multiple": false,
                    "check_callback": true,
                    'data': {
                        'url': '@getTreeJsonUrl',
                        "type": "POST",
                        "dataType": "json",
                        "contentType": "application/json; charset=utf8",
                        'data': function (node) {
                            return { 'id': node.id };
                        }
                    },
                    'themes': {
                        'variant': 'small',
                        'stripes': true
                    }
                },
                "types": {
                    "default": {
                        "icon": '@Url.Content("~/Content/images/Folder2.png")'
                    },
                },
                "plugins": ["contextmenu", "dnd", "state", "types", "wholerow", "sort", "unique"],
                "contextmenu": {
                    "items": function (o, cb) {
                        var items = $.jstree.defaults.contextmenu.items();
                        items["create"].label = "ايجاد زير شاخه";
                        items["rename"].label = "تغيير نام";
                        items["remove"].label = "حذف";
                        var cpp = items["ccp"];
                        cpp.label = "ويرايش";
                        var subMenu = cpp["submenu"];
                        subMenu["copy"].label = "كپي";
                        subMenu["paste"].label = "پيست";
                        subMenu["cut"].label = "برش";
                        return items;
                    }
                }
            })
                .on('delete_node.jstree', function (e, data) {
                    postJsTreeOperation('DeleteNode', data,
                        function (result) {
                            $("#txtTitle").val('');
                            $("#txtUrl").val('');
                        },
                        function (result) {
                            data.instance.refresh();
                        });
                })
                .on('create_node.jstree', function (e, data) {
                    postJsTreeOperation('CreateNode', data,
                        function (result) {
                            data.instance.set_id(data.node, result.id);
                           
                        },
                        function (result) {
                            data.instance.refresh();
                        });
                })
                .on('rename_node.jstree', function (e, data) {
                    postJsTreeOperation('RenameNode', data,
                        function (result) {
                            $("#txtTitle").val(data.node.text);
                        },
                        function (result) {
                            data.instance.refresh();
                        });
                })
                .on('move_node.jstree', function (e, data) {
                    postJsTreeOperation('MoveNode', data,
                        function (result) {
                        },
                        function (result) {
                            data.instance.refresh();
                        });
                })
                .on('copy_node.jstree', function (e, data) {
                    postJsTreeOperation('CopyNode', data,
                        function (result) {
                            data.instance.set_id(data.node, result.id);
                        },
                        function (result) {
                            data.instance.refresh();
                        });
                })
                .on('changed.jstree', function (e, data) {

                })
                .on('dblclick.jstree', function (e) {
                    var href = selectedData.node.a_attr.href;
                    alert('selected node: ' + selectedData.node.text + ', href:' + href);

                    // auto redirect
                    if (href) {
                        window.location = href;
                    }

                    // activate edit mode
                    //var inst = $.jstree.reference(selectedData.node);
                    //inst.edit(selectedData.node);
                })
                .on('select_node.jstree', function (e, data) {
                    //alert('selected node: ' + data.node.text);
                    selectedData = data;
                    $("#txtTitle").val(data.node.text);
                    $("#txtUrl").val(data.node.a_attr.href);
                });

            $("#txtTitle").keyup(function (e) {
                if (selectedData && selectedData.node) {
                    selectedData.node.text = $(this).val();
                }
            });

            $("#txtUrl").keyup(function (e) {
                if (selectedData && selectedData.node) {
                    selectedData.node.a_attr.href = $(this).val();
                }
            });

            $('#btnSave').on('click', function () {
                if (selectedData && selectedData.node) {
                    var inst = $.jstree.reference(selectedData.node);
                    inst.rename_node(selectedData.node, $("#txtTitle").val());
                }
            });
        });
    </script>
}


در سمت سرور هم بررسی کردم نامی که هنگام فراخوانی create_node به سرور ارسال میشه newNode هست

دوستان و اساتید عزیز لطفا راهنمایی کنید ..

سپاس فراوان

پاسخ های این پرسش

تعداد پاسخ ها : 3 پاسخ
کاربر سایت

ایمان مدائنی

عضویت از 1392/01/20

  • چهارشنبه 20 دی 1396
  • 12:59

دوست من نمیشه مشکلتون رو حدس زد

کدتون رو Trace کنید تا ببینید در کدام خط مشکل وجود دارد

کاربر سایت

morteza373

عضویت از 1394/10/30

  • چهارشنبه 20 دی 1396
  • 13:25

فکر کنم مشکل باید از اینجا باشه

on('create_node.jstree', function (e, data) {
                    postJsTreeOperation('CreateNode', data,
                        function (result) {
                            data.instance.set_id(data.node, result.id);
                            
                        },
                        function (result) {
                            data.instance.refresh();
                        });

چون وقتی دکمه ایجاد زیرشاخه رو میزنم این دستور اجرا میشه و در سمت سرور هم برای نام گره مقدار newNode  رو دریافت میکنه ، یعنی نام جدیدی که من وارد میکنم رو به سرور ارسال نمیکنه ، من میخوام موقعی که این دستور اجرا میشه و گره جدید ایجاد میشه و نامش به حالت انتخاب شده در میاد و من نام جدیدی براش وارد میکنم ، اون نام جدید در دیتابیس ذخیره بشه ،

چیزی که به ذهن خودم میرسه اینه که:

روش اول :بعد از ایجاد گره و موقعی که نام گره به حالت انتخاب درمیاد و من نام جدید وارد میکنم تابع rename_node فراخوانی بشه و نام اون عوض بشه ولی هر چی تلاش کردم نتونستم پیادش کنم ،

روش دوم : تابع create_node  رو ویرایش کنم و نام جدید رو به سرور ارسال کنم یعنی مقادیر تا زمانی که نام گره در وضعیت انتخاب شده هست به سرور ارسال نشه تا من نام گره رو عوض کنم  و بعد به سرور ارسال بشه ولی اینجا به محض فراخوانی تابع create مقادیر اولیه شامل نام newNode به سرور ارسال میشه و نامی که من وارد میکنم فقط در سمت کلاینت میمونه ، این رو هم باز نتونستم پیاده کنم

لطفا راهنمایی کنید ...

مرسی

کاربر سایت

سهیل علیزاده

عضویت از 1396/04/09

  • پنجشنبه 21 دی 1396
  • 10:17
کاربرانی که از این پست تشکر کرده اند

هیچ کاربری تا کنون از این پست تشکر نکرده است

اگر نیاز به یک مشاور در زمینه طراحی سایت ، برنامه نویسی و بازاریابی الکترونیکی دارید

با ما تماس بگیرید تا در این مسیر همراهتان باشیم :)