miniUI Datagrid控制元件引入操作

一般情況下可通過在在頁面datagrid控制元件中新增一個專門的操作列，並且通過ondrawcell 方法在操作列中新增相關操作，例如

先如下建立datagrid

    <div id="datagrid" class="mini-datagrid" width="1000px" height="500px" url='@Url.Action("getData","Home")' ondrawcell="draw" autoload="true">
        <div property="columns">
            <div type="indexcolumn" width="120">序號</div>
            <div name="branch" field="branch" width="120" headeralign="center"  allowsort="true">部門</div>
            <div name="name" field="name" width="120" headeralign="center" allowsort="true">姓名</div>
            <div name="cellphone" field="cellphone" width="120" headeralign="center" allowsort="true">聯絡電話</div>
            <div name="sex" field="sex" width="120" headeralign="center" allowsort="true">性別</div>
            <div name="birthday" field="birthday" width="120" headeralign="center" allowsort="true">出生年月</div>
            <div name="Operate" width="120" headeralign="center" allowsort="true">操作</div>
        </div>
    </div>
 

然後再寫相關的draw方法

        function draw(e) {
            var record = e.record;
            var column = e.column;
            if (column.name == "Operate") {
                e.cellHtml = '<a href="javascript:browser(0)"> 瀏覽 </a><a href="javascript:browser(1)"> 編輯 </a>'
            }
        }
 

最後呈現效果為

miniUI Datagrid控制元件中使用mini-button

將draw方法做調整，按照mini-button 的新增方法，

        function draw(e) {
            var record = e.record;
            var column = e.column;
            if (column.name == "Operate") {
                e.cellHtml = '<a class="mini-button" iconcls="icon-search" onclick="edit(0)">檢視</a><a class="mini-button" iconcls="icon-search" onclick="edit(1)">編輯</a>'
            }
        }
 

miniUI Datagrid控制元件中達到mini-button顯示效果

將draw方法做調整

        function draw(e) {
            var record = e.record;
            var column = e.column;
            if (column.name == "Operate") {
                e.cellHtml = '<a class="mini-button" href="javascript:edit(0)"><span class="mini-button-text  mini-button-icon icon-edit" style="">   檢視   </span></a><a class="mini-button" href="javascript:edit(1)"><span class="mini-button-text  mini-button-icon icon-edit" style="">   編輯   </span></a>'
            }
        }

此時，頁面達到mini-button 展示效果