<div style="width:700px; overflow:auto;">
    <div class="input-append" style="margin:0 0 0 3px;float:left;">
        <input type="text" style="width:137px;" placeholder="请输入员工姓名" ms-duplex="contactKey">
        <button class="add-on ibtsearch" style="height: 28px; font-size: 12px; padding: 3px 12px;" ms-click="contactSearch">搜索</button>
    </div>
    <div class="input-append" style="margin:0 3px 0 0;float:right;">
        <button class="add-on ibtsearch" style="height: 28px; font-size: 12px; padding: 3px 12px;" ms-click="contactReset">刷新</button>
        <button class="add-on ibtsearch" style="height: 28px; font-size: 12px; padding: 3px 12px;" ms-click="contactPrint">打印</button>
    </div>
    <table style="width:100%;">
        <tr>
            <td style="width:200px;vertical-align:top;">
                <div class="myGroup">
                    <h3>部门列表</h3>
                    <ul ms-widget='groupTree,groupTree,groupTreeOpts' class='ztree' style="height:405px;overflow:auto;"></ul>
                </div>
            </td>
            <td style="vertical-align:top;" >
                <table class="myContact" border="0" cellspacing="1" cellpadding="0">
                        <thead>
                            <tr>
                                <th style="width:120px;">姓名</th>
                                <th style="width:120px;">职位</th>
                                <th style="width:120px;">手机</th>
                                <th>QQ</th>
                            </tr>
                        </thead>
                </table>
                <div style="height:425px; overflow:auto;" class="contractPrint">
                    <table class="myContact" border="0" cellspacing="1" cellpadding="0">
                        <tbody ms-visible="ContactList.length>0">
                            <tr ms-repeat-item="ContactList">
                                <td style="width:120px;">
                                    <span style="color:#016B96;cursor:pointer;" ms-widget="userCard" ms-data-userid="item.Id">{{item.FullName}}</span>
                                </td>
                                <td style="width:120px;">{{item.Role?item.Role.Name:''}}</td>
                                <td style="width:120px;">{{item.Phone}}</td>
                                <td>{{item.QQ ? item.QQ : '&nbsp;'}}</td>
                            </tr>
                        </tbody>
                        <tfoot ms-visible="ContactList.length==0">
                            <tr style="background:#fff;">
                                <td style="text-align:center;">
                                    <p style="margin-top:20px;"><img src="/Content/Themes/Base/Images/desktop/contact.png" /></p>
                                    <h2 style="height:30px;line-height:30px;color:#999;">暂无数据，请先进入【设置】-【用户管理】页面中，把用户添加进通讯录</h2>
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </td>
        </tr>
    </table>
</div>
<style type="text/css">
    .myContact { width:100%; background:#ccc; }
    .myContact thead tr { background: url(/Content/Themes/Base/Images/table_head_bg.gif) repeat-x;  }
    .myContact thead tr th { text-align:center; height: 30px;  }
    .myContact tbody tr td { text-align:center; height: 30px; background:#fff; font-family:Arial,Tahoma,Verdana;font-size:12px; }
    .myGroup { border:1px solid #ccc; padding:0 0 10px 0; }
    .myGroup h3 { background: url(/Content/Themes/Base/Images/table_head_bg.gif) repeat-x;height:30px;line-height:30px; border-bottom:1px solid #ccc;padding-left:20px;font-weight:bold; }
</style>