前端网页内复杂编辑

前端网页内复杂编辑

 

源码

/**************************************************   全局变量   **************************************************/
//var all_service = null;
var all_modules=null;
var selected_id='';
/**************************************************   辅助方法   **************************************************/
function show_error(request, textStatus, errorThrown)
{
    $("#list_div").html("<div style='text-align:center;width:100%; float:left;color:red;'>没有获取到数据，请<a href='javascript:location.reload();'>刷新</a></div>" +
    "<div class='error_div' style='display:none;' >服务器请求错误: 状态="
     + textStatus + "\n 消息=" + errorThrown + "<br/>" + request.responseText + "</div>");
}

function init_parent_select(parentid,id)
{
    $("#ParentModule").empty();
    $("#ParentModule").append("<option value=''>(顶级模块)</option>");
    for(var i=0;i<all_modules.length;i++)
    {
        if(all_modules[i].ParentModule=='' )
        {
            if(id)
            {
                if(all_modules[i].id!=id)
                {
                    $("#ParentModule").append("<option value='" + all_modules[i].Id + "'>" + all_modules[i].ModuleName + "</option>");
                }
            }
            else
            {
                $("#ParentModule").append("<option value='" + all_modules[i].Id + "'>" + all_modules[i].ModuleName + "</option>");
            }
        }
    }
    if(parentid)
    {
        $("#ParentModule").val(parentid);
    }
}

function clear_form() {
    $("#ModuleName").val("");
    $("#ModulePackage").val("");
    $("#service_sel").empty();
    $("#ParentModule").val('');
}
 
function init_form(model)
{
    if(model)
    {
        $("#ModuleName").val(model.ModuleName);
        $("#ModulePackage").val(model.ModulePackage);
        init_parent_select(model.ParentModule,model.id);
        $("#service_sel").empty();
        //$("#service_sel_all").empty();
        ajax_post("/Module/GetService/"
        , "json"
        , { id: model.Id }
        , function (result) {

            //log(result);
            var revices = eval('(' + result + ')');
            //var revices = result;
            //result = result.parseJSON();
            //log(revices);
            //log(revices.length)
            for (var i = 0; i < revices.length; i++) {
                var service = revices[i];
                //log(service);
                $("#service_sel").append("<option value='" + service.Id + "'>" + service.ServiceName + " v" + service.ServiceVersion
                + " - " + service.ServiceDescription + "</option>");
            }
            $("#load_service_msg_span").html("");
        }
        , show_error, "#load_service_msg_span"
        );
    }
    else
    {
        clear_form();
    }
}

/**************************************************   模块操作    **************************************************/
function add_module() {
    if (!ValidateData()) {
        return;
    }
    var parentId = $('#ParentModule').val();
    var ModuleName = $('#ModuleName').val();
    var ModulePackage = $('#ModulePackage').val();
    var ids = [];
    $("#service_sel option").each(function (i, e) {
        ids.push($(e).val());
    });

    ajax_post(
        "/Module/Add/"
        ,"text"
        ,{ ModuleName: ModuleName, ModulePackage: ModulePackage, service_sel: ids.join(","), ParentModule: parentId }
        ,function(result){
            alert("添加成功");
            selected_id = result;
            loadTree();
        }
        ,show_error
    );
}

function save_module() {
    if (!selected_id) {
        alert("请选择模块");
        return;
    }

    if (!ValidateData()) {
        return;
    }
    var parentId = $('#ParentModule').val();
    var id = selected_id;
    var ModuleName = $('#ModuleName').val();
    var ModulePackage = $('#ModulePackage').val();
    var ids = [];
    $("#service_sel option").each(function(i,e){
        ids.push($(e).val());
    });

    ajax_post("/Module/Save/"
        ,"json"
        , { id: id, ModuleName: ModuleName, ModulePackage: ModulePackage, service_sel: ids.join(","), ParentModule: parentId }
        ,function(result){
            alert("保存成功");
            loadTree();
        }
        ,show_error
    );
}

function del_module() {

    if (!selected_id) {
        alert("请选择模块");
        return;
    }

    if (!confirm("您确定删除吗 ?")) {
        return false;
    }
    ajax_post("/Module/Del/"
        ,"json"
        , {id: selected_id}
        ,function(result){
            loadTree();
            clear_form();
            selected_id=null;
        }
        ,show_error
    );
}

function ValidateData() {
    var result = true;
    var msg = '';
    if ($.trim($("#ModuleName").val()) == '') {
        msg += "模块名不能为空\n";
        result = false;
    }
    if ($.trim($("#ModulePackage").val()) == '') {
        msg += "包名不能为空\n";
        result = false;
    }
    if (!result) {
        alert(msg);
    }
    return result;
}

var setting = {
    view: {
        dblClickExpand: false,
        showLine: true,
        selectedMulti: false
    },
    data: {
        simpleData: {
            enable:true//,
        }
    },
    callback: {
        onClick: onClick
    }
};

function onClick(event, treeId, treeNode, clickFlag) {
    for(var i=0;i<all_modules.length;i++)
    {
        var model = all_modules[i];
        if(model.Id== treeNode.id)
        {
            init_form(model);
            selected_id = treeNode.id;
            return;
        }
    }
    selected_id='';
}

function loadTree(afterGet)
{
    ajax_post("/Module/GetAllModule/"
        , "json"
        , {}
        , function (result) {
            $("#load_module_msg_span").html("");
            all_modules = result;
            for (var i = 0; i < all_modules.length; i++) {
                all_modules[i].open = true;
            }
            var zTree = $.fn.zTree.init($("#ztree_ul"), setting, result);
            if (selected_id != '') {
                var node = zTree.getNodesByParam("id", selected_id);
                if (node) {
                    node.checked = true;
                    $(node).trigger("click");
                }
                else {
                    clear_form();
                }
            }
            if (afterGet) {
                afterGet();
            }
        }
        , show_error, "#load_module_msg_span"
    );
}

$(document).ready(function () {
    /**** 加载所有模块组织成树并加载到所有顶层模块上 *****/
    loadTree( function(){init_parent_select();});
});


function showAddDialog() {
    var selected = [];
    $("#service_sel option").each(function (i, e) {
        selected.push($(e).val());
    });

    var add_service_dialog = $.dialog({
        title: "添加服务",
        width: '700px',
        height: '450px',
        padding: 5,
        //content: 'url:/Service/DialogServiceList/?selected=' + selected.join(','),
        content: 'url:/Service/DialogServiceList/',
        //data:{selected:selected.join(',') },
        init: function () {
            this.content.SetSelected(selected.join(','));
        },
        okVal: '确定',
        ok: function () {
            var result = this.content.GetSelectedServices();
            var template = $("#service_template").html();
            for (var i = 0; i < result.length; i++) {
                //log(service);
                var service = result[i];
                $("#service_sel").append("<option value='" + service.Id + "'>" + service.ServiceName + " v" + service.ServiceVersion + " - " + service.ServiceDescription + "</option>");
            }
        },
        cancelVal: '关闭',
        cancel: true /*为true等价于function(){}*/
    });
}


function delService() {
    var selected = $('#service_sel option:selected');
    $(selected).remove();
}