這幾天剛學(xué)會(huì)在easyui的datagrid單元格中添加按鈕的做法，一路坐下來思路很清晰，不過還是記下來防止以后忘了，畢竟還是沒寫幾遍，不是很熟。下面就是步驟，這個(gè)方法應(yīng)該只是一種還有別的暫且不管，以后看到新的方法再添加。

1.創(chuàng)建easyui-datagrid 表格 代碼如下：

<table id="list_data_user" > 
        <thead>
            <tr>
                <th data-options="field:'ck',checkbox:true">用戶標(biāo)識(shí)</th>
                <th data-options="field:'userId',width:80">用戶標(biāo)識(shí)</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">創(chuàng)建時(shí)間</th>
                <th data-options="field:'userUpdateTime',width:80,formatter:Common.TimeFormatter">更新時(shí)間</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',//圖標(biāo) 
                width: 500, 
                height: 'auto', 
                nowrap: false, 
                striped: true, 
                border: true, 
                collapsible:false,//是否可折疊的 
                fit: true,//自動(dòng)大小 
                fitColumns: true,//列寬自適應(yīng) 
                loadMsg: '數(shù)據(jù)加載中請稍后……',
                url:'../ra/userservice/getlist', 
                method:'get',
                remoteSort:false,  
                idField:'userId', 
                singleSelect:false,//是否單選 
                pagination:true,//分頁控件 
                rownumbers:false,//行號(hào) 
                onLoadSuccess: function () {
                    $('.easyui-linkbutton_promote').linkbutton({
                        text : '設(shè)為管理員',
                        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來格式化達(dá)到嵌入按鈕的效果。既然格式化調(diào)用了這個(gè)formatOper方法，那我們需要寫一個(gè)該方法定義一個(gè)按鈕，從上面的代碼也可以看出，定義的按鈕在onLoadSuccess(){}里面呈現(xiàn)。

2.創(chuàng)建formatOper方法 代碼如下：

function formatOper(value, row, index) {

            var str = "";
            //按鈕是esayui-linkbutton 需要拼接出來，這年頭拼接傳參數(shù)簡直要人老命
            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可以調(diào)用的觸發(fā)方法，也就是我們這個(gè)按鈕要實(shí)現(xiàn)的功能所要調(diào)用的終極無敵大招，這個(gè)方法就看你的需求了上面只是調(diào)用這個(gè)方法。
但是目前調(diào)用的還不是直接調(diào)用我們的終極無敵大招，上面的onclick調(diào)用的是下面代碼定義的一個(gè)方法，看代碼：

<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("操作提示","確定升級(jí)為管理員",function(r){
                             if(r){
                                 DBExector.updataPromote(userId);
                             }
                         });
                     } 
        };
         
    </script>

哎 從上面的代碼就可以看出來了 這些方法才是最后的調(diào)用。通過這個(gè)方法調(diào)用到與后臺(tái)數(shù)據(jù)聯(lián)系的方法，有很多寫的方法 ，我只是覺得這樣寫比較拉風(fēng)，便于裝逼。

上面的就是在easyui-datagrid中嵌套按鈕的一種方法，方法應(yīng)該還有很多，不過我暫時(shí)只會(huì)這一個(gè)還是偷學(xué)來的 ，先記錄下來，以后發(fā)現(xiàn)別的方法再補(bǔ)充進(jìn)來。

記下爬過的坑防止忘了又掉坑里。第一篇自己的原創(chuàng)簡書，好6啊哈哈，我要走向宗師了，加油。