在miniui 中的datagrid行记录中使用 miniui按钮

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 展示效果