跳到主要內容

MVC Sample fancyTree to fancyTree

標籤：
@{
    ViewBag.Title = "角色權限維護 - 查詢";
}
<table style="width:100%" border="0" cellspacing="0">
    <tbody>
        <tr>
            <td height="25" class="menu_1">
                <span class="main_title">
                    &nbsp;&nbsp;<span>@ViewBag.Title</span>
                </span>
            </td>
        </tr>
        <tr>
            <td></td>
        </tr>
    </tbody>
</table>
<table style="width:100%" border="0" cellspacing="0" cellpadding="0">
    <tbody>
        <tr>
            <td width="1%"></td>
            <td width="98%" class="highLightText">
                <br>
                <input type="button" class="cnnFormButton" onclick="javascript:location.href = '@Url.Action("Edit")';" value="查詢">
                <input type="button" class="cnnFormButton" onclick="javascript:;" value="清除">
                <br>
                <br>
                <table style="width:100%" border="0" cellpadding="3" cellspacing="0" class="datatable">
                    <tbody>
                        <tr class="tr_head">
                            <td colspan="2">基本資料</td>
                        </tr>
                        <tr>
                            <td align="right" class="FormLine1" style="width: 15%; height: 23px">
                                <span>公司別:</span>
                            </td>
                            <td class="FormLine2" style="width: 85%; height: 23px">
                                <select id="selCompanyType" act='@Url.Action("GetCompanyList", "CommUtil", new { compId = "3", systemId = "6" })'>                                 
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td align="right" class="FormLine1" style="width: 15%; height: 23px">
                                <span>系統別:</span>
                            </td>
                            <td class="FormLine2" style="width: 85%; height: 23px">
                                <select id="selSystemType" act='@Url.Action("GetSysList", "CommUtil", new { compId = "16" })'></select>
                            </td>
                        </tr>
                        <tr>
                            <td align="right" class="FormLine1" style="width: 15%; height: 23px">
                                <span>角色ID:</span>
                            </td>
                            <td class="FormLine2" style="width: 85%; height: 23px">
                                <input type="text" style="width:80px;"> <input type="button" value="..." />
                            </td>
                        </tr>
                        <tr>
                            <td align="right" class="FormLine1" style="width: 15%; height: 23px">
                                <span>角色名稱:</span>
                            </td>
                            <td class="FormLine2" style="width: 85%; height: 23px">
                                <span></span>
                            </td>
                        </tr>
                        <tr>
                            <td align="right" class="FormLine1" style="width: 15%; height: 23px">
                                <span>角色狀態:</span>
                            </td>
                            <td class="FormLine2" style="width: 85%; height: 23px">
                                <span></span>
                            </td>
                        </tr>
                        <tr>
                            <td align="right" class="FormLine1" style="width: 15%; height: 23px">
                                <span>角色說明:</span>
                            </td>
                            <td class="FormLine2" style="width: 85%; height: 23px">
                                <span></span>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <br>
                <input type="button" class="cnnFormButton" onclick="javascript:location.href = '@Url.Action("Edit")';" value="查詢">
                <input type="button" class="cnnFormButton" onclick="javascript:;" value="清除">
                <br>
                <br>
            </td>
            <td width="1%"></td>
        </tr>
    </tbody>
</table>
<script src="@Url.Content("~/Scripts/AdmRoleFunc/Index.js")"></script>
---------------------------------------------------------------
//公司別列表
$(function () {
    //var urlGetCompList = $("#urlGetCompList").val();
    var urlGetCompList = $("#selCompanyType").attr('act');
    //alert(urlGetCompList);
    $.ajax({
        url: urlGetCompList ,
        dataType: 'json',
        type: 'GET',
        contentType: 'application/json',
        success: function (returnData) {          
            cb = "<option value=''> 請選擇 </option>";
            $.each(returnData, function (i, item) {
                cb += '<option value="' + item.COMP_ID + '">' + item.COMP_NME + '</option>';
            });
            $("#selCompanyType").append(cb);
        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert(xhr.responseText);
        }
    });
})

//系統別列表
$(function () {
    //var urlGetCompList = $("#urlGetCompList").val();
    var urlGetCompList = $("#selSystemType").attr('act');
    //alert(urlGetCompList);
    $.ajax({
        url: urlGetCompList,
        dataType: 'json',
        type: 'GET',
        contentType: 'application/json',
        success: function (returnData) {
            cb = "<option value=''> 請選擇 </option>";
            $.each(returnData, function (i, item) {
                cb += '<option value="' + item.GRP_ID + '">' + item.GRP_NME + '</option>';
            });
            $("#selSystemType").append(cb);
        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert(xhr.responseText);
        }
    });
})
---------------------------------------------------------------
@{
    ViewBag.Title = "角色權限維護 - 編輯";
}
<table style="width:100%" border="0" cellspacing="0">
    <tbody>
        <tr>
            <td height="25" class="menu_1">
                <span class="main_title">
                    &nbsp;&nbsp;<span>@ViewBag.Title</span>
                </span>
            </td>
        </tr>
        <tr>
            <td></td>
        </tr>
    </tbody>
</table>
<table style="width:100%" border="0" cellspacing="0" cellpadding="0">
    <tbody>
        <tr>
            <td width="1%"></td>
            <td width="98%" class="highLightText">
                <br>
                <input type="button" class="cnnFormButton" style="width:100px"  onclick="javascript:BtnExecute(this);" act='@Url.Action("Execute")' result='@Url.Action("RedirectToMessage", new { message = "啟動完成" })' value=" 儲存&立即啟動 ">
                <input type="button" class="cnnFormButton" onclick="javascript:BtnSave(this);" act='@Url.Action("Save")' result='@Url.Action("RedirectToMessage", new { message = "儲存完成" })' value="儲存">
                <input type="button" class="cnnFormButton" onclick="javascript:location.href = '@Url.Action("Index")';" value="取消">
                <br><br>
                <span class="desc">  2017/03/09 11:45:13 (05319)馬爹利  </span>
                <br>
                <table style="width:100%" border="0" cellpadding="3" cellspacing="0" class="datatable">
                    <tbody>
                        <tr>
                            <td align="right" class="FormLine1" style="width: 15%; height: 23px">
                                <span>生效日:</span>
                            </td>
                            <td class="FormLine2" style="width: 85%; height: 23px" colspan="4">
                                <input type="text" id="effectDate" value="2017/03/15" />
                            </td>
                        </tr>
                        <tr>
                            <td align="right" class="FormLine1" style="width: 15%; height: 23px">
                                <span>生效單號:</span>
                            </td>
                            <td class="FormLine2" style="width: 85%; height: 23px" colspan="4">
                                <span>UP12233341232</span>
                            </td>
                        </tr>
                        <tr>
                            <td align="right" class="FormLine1" style="width: 15%; height: 23px">
                                <span>申請說明:</span>
                            </td>
                            <td class="FormLine2" style="width: 85%; height: 23px" colspan="4">
                                <input type="text" style="width: 400px;" value=" " />
                            </td>
                        </tr>                        
                    </tbody>
                </table>
                <br>
                <table style="width:100%" border="0" cellpadding="3" cellspacing="0" class="datatable">
                    <tbody>
                        <tr class="tr_head">
                            <td colspan="5">基本資料</td>
                        </tr>
                        <tr>
                            <td align="right" class="FormLine1" style="width: 15%; height: 23px">
                                <span>公司別:</span>
                            </td>
                            <td class="FormLine2" style="width: 85%; height: 23px" colspan="4">
                                <span>中華</span>
                            </td>
                        </tr>
                        <tr>
                            <td align="right" class="FormLine1" style="width: 15%; height: 23px">
                                <span>系統別:</span>
                            </td>
                            <td class="FormLine2" style="width: 85%; height: 23px" colspan="4">
                                <span>起租</span>
                            </td>
                        </tr>
                        <tr>
                            <td align="right" class="FormLine1" style="width: 15%; height: 23px">
                                <span>角色ID:</span>
                            </td>
                            <td class="FormLine2" style="width: 85%; height: 23px" colspan="4">
                                <span>S001</span>
                            </td>
                        </tr>
                        <tr>
                            <td align="right" class="FormLine1" style="width: 15%; height: 23px">
                                <span>角色名稱:</span>
                            </td>
                            <td class="FormLine2" style="width: 85%; height: 23px" colspan="4">
                                <span>系統管理人員</span>
                            </td>
                        </tr>
                        <tr>
                            <td align="right" class="FormLine1" style="width: 15%; height: 23px">
                                <span>角色狀態:</span>
                            </td>
                            <td class="FormLine2" style="width: 85%; height: 23px" colspan="4">
                                <span>Y</span>
                            </td>
                        </tr>
                        <tr>
                            <td align="right" class="FormLine1" style="width: 15%; height: 23px">
                                <span>角色說明:</span>
                            </td>
                            <td class="FormLine2" style="width: 85%; height: 23px" colspan="4">
                                <span>S001 系統管理人員</span>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <br>
                <table style="width:100%" border="0" cellpadding="3" cellspacing="0" class="datatable">
                    <tbody>
                        <tr class="tr_head">
                            <td colspan="2">功能設定</td>
                        </tr>
                        <tr>
                            <td class="FormLine1" width="48%" style="vertical-align:top;text-align:left">
                                <div id="funcTree" treesrc='@Url.Action("GetFuncTree", "CommUtil", new { compId = "3", systemId= "6" })'></div>
                            </td>
                            <td class="FormLine1" width="48%" style="vertical-align: top; text-align: left;">
                                <table border="0" id="funcModTree" treesrc='@Url.Action("GetFuncTree", "CommUtil", new { compId = "3", systemId= "6" })' width="100%">
                                    <colgroup>
                                        <col width="65%"></col>
                                        <col width="35%"></col>
                                    </colgroup>
                                    <thead>
                                        <tr> <th>  </th>  <th> </th>   </tr>
                                    </thead>
                                    <tbody class="FormLine2"></tbody>
                                </table>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <br>
                <input type="button" class="cnnFormButton" style="width:100px"  onclick="javascript:BtnExecute(this);" act='@Url.Action("Execute")' result='@Url.Action("RedirectToMessage", new { message = "啟動完成" })' value=" 儲存&立即啟動 ">
                <input type="button" class="cnnFormButton" onclick="javascript:BtnSave(this);" act='@Url.Action("Save")' result='@Url.Action("RedirectToMessage", new { message = "儲存完成" })' value="儲存">
                <input type="button" class="cnnFormButton" onclick="javascript:location.href = '@Url.Action("Index")';" value="取消">
                <span id="clickTreeResult" style="color:gray"></span>
                <br>
                <br>
            </td>
            <td width="1%"></td>
        </tr>
    </tbody>
</table>
<script src="@Url.Content("~/Scripts/AdmRoleFunc/Edit.js")"></script>
<link href="@Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" />

---------------------------------------------------------------
//功能樹--
$(function () {
    $("#funcTree").fancytree({
        icon: false,
        clickFolderMode: 1,
        checkbox: true,
        selectMode: 3,
        source: {
            url: $("#funcTree").attr("treesrc")
        },
        select: function (event, data) {
            var selNodes = data.tree.getSelectedNodes();
            var selKeys = $.map(selNodes, function (node) {
                return node.key + "/" + node.title;
            });
            $("#clickTreeResult").text(selKeys.join(", "));
        },
        cookieId: "funcTree",
        idPrefix: "funcTree_"
    });
});

//功能異動樹
$(function () {
    $("#funcModTree").fancytree({
        extensions: ["table"],      
        table: {
            indentation: 20
        },      
        source: {
            url: $("#funcModTree").attr("treesrc")
        },      
        renderColumns: function (event, data) {  
            var node = data.node,
              $tdList = $(node.tr).find(">td");          
            $tdList.eq(1).html("<input  class='cnnFormButton'  type='button' name='btn1' value='還原' value1='" + node.key + "' > ");
        }
    });    
    $("#funcModTree").delegate("input[name=btn1]", "click", function (e) {
           var node = $.ui.fancytree.getNode(e),
           $input = $(e.target);
           e.stopPropagation();
           $("#clickTreeResult").text($input.attr('value1'));
    }); 
});
//生效日
$(function () {
    $("#effectDate").datepicker({
        dateFormat: "yy/mm/dd",
        dafaultDate: new Date(),
        minDate: new Date()
    });
});