这几天刚学会在easyui的datagrid单元格中添加按钮的做法，一路坐下来思路很清晰，不过还是记下来防止以后忘了，毕竟还是没写几遍，不是很熟。下面就是步骤，这个方法应该只是一种还有别的暂且不管，以后看到新的方法再添加。
1.创建easyui-datagrid 表格 代码如下：
<table id="list_data_user" >
<thead>
<tr>
<th data-options="field:'ck',checkbox:true">用户标识</th>
<th data-options="field:'userId',width:80">用户标识</th>
<th data-options="field:'userName',width:80">用户名</th>
<th data-options="field:'userPermission',width:80" >用户类型</th>
<th data-options="field:'userCreateTime',width:80,formatter:Common.TimeFormatter">创建时间</th>
<th data-options="field:'userUpdateTime',width:80,formatter:Common.TimeFormatter">更新时间</th>
<th data-options="field:'_operate',width:80,align:'center',formatter:formatOper">操作</th>
</tr>
</thead>
</table>
<script>
$(function() {
$('#list_data_user').datagrid({
iconCls:'icon-edit',//图标
width: 500,
height: 'auto',
nowrap: false,
striped: true,
border: true,
collapsible:false,//是否可折叠的
fit: true,//自动大小
fitColumns: true,//列宽自适应
loadMsg: '数据加载中请稍后……',
url:'../ra/userservice/getlist',
method:'get',
remoteSort:false,
idField:'userId',
singleSelect:false,//是否单选
pagination:true,//分页控件
rownumbers:false,//行号
onLoadSuccess: function () {
$('.easyui-linkbutton_promote').linkbutton({
text : '设为管理员',
plain : true,
iconCls : 'icon-ok'
}),
$('.easyui-linkbutton_del').linkbutton({
text : '删除',
plain : true,
iconCls : 'icon-no'
});
},
onLoadError: function() {
alert("list_data_syslog datagrid onLoadError");
},
toolbar:[{
text:'删除',
iconCls : 'icon-no',
handler : function() {
UserTabUtil.deleterows();
}
}]
});
});
上面代码中是将按钮凡在了操作一列上，通过formatter来格式化达到嵌入按钮的效果。既然格式化调用了这个formatOper方法，那我们需要写一个该方法定义一个按钮，从上面的代码也可以看出，定义的按钮在onLoadSuccess(){}里面呈现。
2.创建formatOper方法 代码如下：
function formatOper(value, row, index) {
var str = "";
//按钮是esayui-linkbutton 需要拼接出来，这年头拼接传参数简直要人老命
var promoteBtnObj = '<a class="easyui-linkbutton_promote"onclick="UserTabUtil.userPromote('+row.userId+')"></a>';
var delBtnObj = '<a class="easyui-linkbutton_del" onclick="UserTabUtil.deleterow('
+ row.userId + ')"></a>';
str += promoteBtnObj;
str += delBtnObj;
return str;
}
从上面代码可以看出之前onLoadSuccess(){}里定义的就在这拼接出来，可以看到按钮里有onclick方法，所以我们还需要的是onclick可以调用的触发方法，也就是我们这个按钮要实现的功能所要调用的终极无敌大招，这个方法就看你的需求了上面只是调用这个方法。
但是目前调用的还不是直接调用我们的终极无敌大招，上面的onclick调用的是下面代码定义的一个方法，看代码：
<script type="text/javascript">
UserTabUtil = {
deleterow : function (userId) {
$.messager.confirm("操作提示","确定删除？",function(r){
if(r){
DBExector.deleteUser(userId);
}
});
},
deleterows : function(){
$.messager.confirm("操作提示", "确定删除？", function(r) {
if(r){
var rows = $('#list_data_user').datagrid('getSelections');
var resultArr = [];
for(var i=0;i < rows.length;i++){
resultArr[i] = rows[i].userId;
}
var resultIds = StringUtils.spiltByTag(resultArr, ",");
DBExector.deleteUser(resultIds);
}
});
},
userPromote :function(userId){
$.messager.confirm("操作提示","确定升级为管理员",function(r){
if(r){
DBExector.updataPromote(userId);
}
});
}
};
</script>
哎 从上面的代码就可以看出来了 这些方法才是最后的调用。通过这个方法调用到与后台数据联系的方法，有很多写的方法 ，我只是觉得这样写比较拉风，便于装逼。
上面的就是在easyui-datagrid中嵌套按钮的一种方法，方法应该还有很多，不过我暂时只会这一个还是偷学来的 ，先记录下来，以后发现别的方法再补充进来。
记下爬过的坑防止忘了又掉坑里。第一篇自己的原创简书，好6啊哈哈，我要走向宗师了，加油。
网友评论