構建ASP.NET MVC5+EF6+EasyUI 1.4.3+Unity4.x注入的后臺管理系統（55）-工作流設計-表單布局

前言： 這一節比較有趣。基本純UI,但是不是很復雜

有了實現表單的打印和更加符合流程表單方式，我們必須自定義布局來適合業務場景打印！我們想要什么效果？看下圖

（我們沒有布局之前的表單和設置布局后的表單）

改變后的布局

本節知識點：

easyui draggable 與 resizable 的結合使用（拖動與設置大小）

在Form添加Action Action提取來自48節的Create代碼。改下名稱

[SupportFilter(ActionName = "Edit")]
        public ActionResult FormLayout(string id)
        {
            if (string.IsNullOrEmpty(id))
            {
                return View();
            }


        ViewBag.FormId = id;
        ViewBag.Perm = GetPermission();
        ViewBag.Html = ExceHtmlJs(id);

        return View();
    }</pre> 

UI代碼提取：jquery-easyui-1.4.3\demo\droppable 與resizable 文件下的代碼
提取后代碼：我自己加了點Style
FormLayout.cshtml
<style type="text/css">
    input[type="text"], input[type="number"], input[type="datetime"], input[type="datetime"], select, textarea {display: normal;}


#setFormLayout{position:relative;overflow:hidden;width:100%;height:500px}
#setFormLayout .easyui-draggable{border:1px #000 solid;overflow:hidden;background:#fff;width:300px;}
.inputtable{height:100%;width:100%;}
.inputtable .inputtitle{border-right:1px #000 solid;width:80px;padding-right:10px;text-align:right;vertical-align:middle}
.inputtable .inputcontent { text-align:right;vertical-align:middle;padding:5px;}
.inputtable .inputcontent .input{width:96%}
.inputtable .inputcontent textarea{height:90%;min-height:40px;}   

</style>
<div id="setForm">
    <div id="setFormLayout" class="easyui-panel">
        <div class="easyui-draggable" data-option="onDrag:onDrag">
            <table class="inputtable">
                <tr>
                    <td class="inputtitle">名稱</td>
                    <td class="inputcontent"><input class="input" type="text" /></td>
                </tr>
            </table>
        </div>

</div>

</div>
<script>

function onDrag(e) {
    var d = e.data;
    if (d.left < 0) { d.left = 0 }
    if (d.top < 0) { d.top = 0 }
    if (d.left + $(d.target).outerWidth() > $(d.parent).width()) {
        d.left = $(d.parent).width() - $(d.target).outerWidth();
    }
    if (d.top + $(d.target).outerHeight() > $(d.parent).height()) {
        d.top = $(d.parent).height() - $(d.target).outerHeight();
    }
}


$('.easyui-draggable').draggable({ edge: 5 }).resizable();

</script></pre> 
 
代碼解析：

 
  
 
   
 
    
onDrag

    
e

    
在拖動過程中觸發，當不能再拖動時返回false。

   

  

 
   $('.easyui-draggable').draggable({ edge: 5 }).resizable(); 邊框位置5px內都可以做為設置大小的邊界
 
 
 運行結果：任意拖動位置 

  
填充表單：如何填充表單。我們需要提取“表單申請”的代碼。跳到48節可以看到怎么讀取表單的代碼
 // 獲取指定名稱的HTML表單 
        private string GetHtml(string id, string no, ref StringBuilder sbJS)
        {
            StringBuilder sb = new StringBuilder();
            Flow_FormAttrModel attrModel = formAttrBLL.GetById(id);
            sb.AppendFormat("<tr><th>{0} :</th>", attrModel.Title);
            //獲取指定類型的HTML表單
            sb.AppendFormat("<td>{0}</td></tr>", new FlowHelper().GetInput(attrModel.AttrType, attrModel.Name, no));
            sbJS.Append(attrModel.CheckJS);
            return sb.ToString();
        }
 
 
把下面這段代碼填充到這個方法中

<div class="easyui-draggable" data-option="onDrag:onDrag">
            <table class="inputtable">
                <tr>
                    <td class="inputtitle">名稱</td>
                    <td class="inputcontent"><input class="input" type="text" /></td>
                </tr>
            </table>
        </div>
 
 
最后生成代碼：

 private string GetHtml(string id, string no, ref StringBuilder sbJS)
        {
            StringBuilder sb = new StringBuilder();
            Flow_FormAttrModel attrModel = formAttrBLL.GetById(id);
            sb.AppendFormat("<div class='easyui-draggable' data-option='onDrag:onDrag'><table class='inputtable'><tr><td class='inputtitle'>{0}</td>", attrModel.Title);
            //獲取指定類型的HTML表單
            sb.AppendFormat("<td class='inputcontent'>{0}</td></tr></table></div>", new FlowHelper().GetInput(attrModel.AttrType, attrModel.Name, no));
            sbJS.Append(attrModel.CheckJS);
            return sb.ToString();
        }
 
 
運行效果 （有點長，謝謝觀看GIF）

  
  
 如何保存？我們要保存到Flow_Form表中的Html字段中去。以后使用判斷這個字段是否有null不為null優先取出 
 如何取保存值：$("#setFormLayout").html() 
保存代碼：
 $("#btnSave").click(function () {
            $.ajax({
                url: "@Url.Action("SaveLayout")",
                type: "Post",
                data: { html: $("#setFormLayout").html(), formId: "@(ViewBag.FormId)" },
                dataType: "json",
                success: function (data) {
                if (data.type == 1) {
                    window.parent.frameReturnByMes(data.message);
                    window.parent.frameReturnByReload(true);
                    window.parent.frameReturnByClose()
                }
                else {
                    window.parent.frameReturnByMes(data.message);
                }
            }
        });
    });
 
 
最后融合到我的申請和審批中來。

  
The End!我們不得不承認EASYUI 的強大之處
 </div>