.net mvc mssql easyui treegrid 及时 编辑 ，支持拖拽

这里提到了，1个问题，怎么扩展 Easyui

参见： http://blog.csdn.net/chenkai6529/article/details/17528833

 

 

@{

    ViewBag.Title = "Index2";

    Layout = "~/Views/Shared/_Layout.cshtml";

}

<!--支持拖拽的插件-->

<script src="~/jquery-easyui-1.4.2/Extension/treegrid-dnd.js"></script>

<input type="radio" name="OperationType" value="01">

<span name="OperationSpan" style="cursor: pointer">编辑模式</span>

<input type="radio" name="OperationType" value="02">

<span name="OperationSpan" style="cursor: pointer">拖拽模式</span>

<table id="MenuTree" title="Menu" class="easyui-treegrid" style="height: 700px; width: 850px;" data-options="

    rownumbers:true,

    method:'post',

    url:'@Url.Action("Index2")',

    treeField:'MenuName',

    fixed:true,  

    idField:'id',

    onClickCell:onClickCell,

    onLoadSuccess: function(row){

    $(this).treegrid('enableDnd', row?row.id:null);

    },

    onDrop: onDrop,

    onAfterEdit:onAfterEdit

    ">

    <thead>

        <tr>

            <th data-options="field:'id',checkbox:true"></th>

            <th data-options="field:'MenuName',editor:'text'">MenuName</th>

            <th data-options="field:'Url',editor:'text'">Url</th>

            <th data-options="field:'MenuNo'">MenuNo</th>

        </tr>

    </thead>

</table>

<script>

    //扩展方法 摘自 ：http://blog.csdn.net/chenkai6529/article/details/17528833

    // if 里面 的没有看明白 else 里面的代码和后面的代码 ，意思是 所有节点 设置 draggable 为  disabled: true

    $.extend($.fn.treegrid.methods, {

        disableDnd: function (jq, id) {

            return jq.each(function () {

                var target = this;

                var state = $.data(this, 'treegrid');

                state.disabledNodes = [];

                var t = $(this);

                var opts = state.options;

                if (id) {

                    var nodes = opts.finder.getTr(target, id);

                    var rows = t.treegrid('getChildren', id);

                    for (var i = 0; i < rows.length; i++) {

                        nodes = nodes.add(opts.finder.getTr(target, rows[i][opts.idField]));

                    }

                } else {

                    var nodes = t.treegrid('getPanel').find('tr[node-id]');

                }

                nodes.draggable({

                    disabled: true,

                    revert: true,

                    cursor: 'pointer'

                });

            });

        }

    });



    var SelectId;//当前编辑行的Id

    var OperationType;// 操作模式 （编辑或拖拽）



    function onClickCell(index, field, data) {

        var Type = $("[name='OperationType']:checked").val();

        if (Type == "01") {

            $('#MenuTree').treegrid('disableDnd');

            if (SelectId != undefined) {

                $('#MenuTree').treegrid('endEdit', SelectId);

            }

            SelectId = field.id;

            $('#MenuTree').treegrid('beginEdit', SelectId)

        }

    }



    function onDrop(targetRow, sourceRow, point) {

        // 记录 拖拽 的 数据

    }



    function onAfterEdit(row, changes) {

        for (change in changes) {

            //记录 修改 的 数据

        }

    }



    $(document).ready(function () {

        $("[name='OperationType']").click(function () {

            OperationType = $(this).val();

            if (OperationType == "01") {

            } else {

                document.getElementsByName('OperationType')[1].checked = true;

                $('#MenuTree').treegrid('endEdit', SelectId);

                $('#MenuTree').treegrid('enableDnd');

            }

        });



        $("[name='OperationSpan']").click(function () {

            if (this.innerText == "编辑模式") {

                OperationType = "01";

                document.getElementsByName('OperationType')[0].checked = true;

            } else {

                OperationType = "02";

                document.getElementsByName('OperationType')[1].checked = true;

                $('#MenuTree').treegrid('endEdit', SelectId);

                $('#MenuTree').treegrid('enableDnd');

            }

        });



        document.getElementsByName('OperationType')[0].checked = true;// 设置默认为编辑模式

    });

</script>

 

 效果图：

 

数据源、后台代码 参见 上一篇  http://www.cnblogs.com/bingguang/p/4496951.html

未完、待续~    后台执行代码还没有写.