1、前端网页代码,设置EasyUI的datagrid:
<tableid="tt"class="easyui-datagrid"style="width:700px;height:500px;font-size:xx-large " url="../JsonData/WebForm1Data.aspx"singleSelect="true"rownumbers="true">
<thead>
<tr>
<th field="action"width="80"align="centor" formatter="InputAction">操作</th>
<thfield="Field1"width="200 "align="centor">Field1</th>
<th field="Field2"width="80"align="centor">Field2</th>
<th field="Field3"width="80"align="centor">Field3</th>
</tr>
</thead>
</table>
重点:formatter="InputAction"使用InputAction函数对[操作]栏位格式化。
2、InputAction Function:
function InputAction(value, row, index) {
return'<a href="javascript:void(0)" id="mb' + index + '" class="easyui-menubutton" menu="#mm3" iconCls="icon-edit" οnmοuseοver="ShowMenu(' + index + ')">'+this.title+'</a>';
}
重点:1、添加的<div>要命名id:id="mb' + index + '"。2、为其加上onmouseover 事件的Function,以便按下菜单时能响应不同列的事件。
3、ShowMenu Function
function ShowMenu(key) {
$('#mm3').menu({
onClick: function (item) {
if (item.id != undefined && eval(item.id) != undefined && $.isFunction(eval(item.id))) {
item.onclick = eval(item.id + "(" + key + ")");
}
}
});
}
4、菜单item响应Click事件Function:
function menuModify(key) {
alert("menuModify");
alert(key);
}
function menuRead(key) {
alert("menuReady");
alert(key);
}
重点:Function名要与menubutton的菜单项id一致
5、前端网页代码,设置EasyUI的menubutton菜单项:
<divid="mm3"class="easyui-menu"style="width:120px;">
<div iconCls="icon-save" id="menuModify">编辑</div>
<divid="menuRead">只读</div>
<divid="Div7">列印</div>
<divid="Div8">删除</div>
<divclass="menu-sep"></div>
<divid="Div9">签收</div>
<divid="Div10">提交</div>
<divid="Div11">接受</div>
<divid="Div12">拒绝</div>
</div>
咦?怎么不是menubutton的效果?怎么只是超连接,而且鼠标放上去也没有反应的?
哦,原来我们忘了在datagrid成功载入数据后对通过InputAction Function加上去的<div>进行一次menubutton效果的生成。代码如下:
$(function () {
$('#tt').datagrid({
onLoadSuccess: function (data) {
for (i = 0; i < $('#tt').datagrid('getRows').length; i++) {
$('#mb' + i).menubutton();
}
}
});
OK,这样运行后的效果就如图二所示的效果一样了!
总结知识点:
1、[对象].[事件]=function(){}:为对象的事件绑定Function,如Function是动态的,则可用eval(FunctionName)。
2、在datagrid成功载入数据后对动态添加的EasyUI控件进行一次相应控件的效果生成。
3、datagrid可通过formatter 属性来自定义各类超Cool的效果。