jQuery EasyUI DataGrid - 格式化列(formatter )

一(从网上找的别人的)、

通过formatter方法给Jquery easyui 的datagrid 每行增加操作链接
我们都知道Jquery的EasyUI的datagrid可以添加并且自定义Toolbar,这样我们选择一行然后选择toolbar的相应按钮就可以对这行的数据进行操作。但实际项目里我们可能需要在每行后面加一些操作链接,最常见的就是比如“修改”、“删除”、“查看”之类。如下图:

 jQuery EasyUI DataGrid - 格式化列(formatter )

解决方法:

第一步,我需要 在datagrid行里添加一列,field指向id(field:'id'),然后对这列进行格式化处理(formater:格式化函数),如下:

  1. <th data-options="field:'id',width:180,formatter:  rowformater">操作</th>


第二步:
根据documentation的描述,formatter的格式化函数有3个parameters,分别是:
value: the field value,也就是field:'id'。
rowData: the row record data。就是这一行的Json数据,包括你已经选择在Datagrid上显示的内容,和没显示的内容。因为我的Json数据里包括了Id这一内容,所以 我可以直接调用。如果你作为数据源的Json里没有Id属性,需要修改一下Json的输出。我的每行Json输出是类似 {"id":"1","name":"\u7ecf\u6d4e\u53d1\u5c55","parentId":"0"}的结构
rowIndex: the row index.当前行的Index。

所以我写rowformater这个函数的时候,也需要用function rowformater(value,row,index)的方法。为了看起来清晰明白,我只在函数里写了一句话(放在<head>标签里),事实上项目上需要做一些基本的判断。:

  1.  <script type="text/javascript">
  2.  function rowformater(value,row,index)
  3. {
  4. return "<a href='"+row.id+"' target='_blank'>操作</a>";
  5. }
  6.  </script>

 二、添加链接(自己的):

<th  data-options="field:'action',width:100"  formatter="formatAction">操作</th>

<script type="text/javascript">
function formatAction (value,row,index){
    var val="";
    if(row.disabled==1){
        val="<a href='javascript:void;' class='delete' onclick='if(confirm(\"是否禁用?\")){dis("+row.store_id+")}' title='禁用'></a>";       
    }else if(row.disabled==2){
        val="<a href='javascript:void;' class='edit' onclick='if(confirm(\"是否还原?\")){revert("+row.store_id+")}' title='还原'></a>";
    }
    val+="<a href='javascript:void(0);' class='edit' onclick='append("+row.store_id+",\"uname\")' title='修改'></a>";
    return val;
}

function dis(storeId){
    $("#form").ajaxSubmit({
        url:"../store!disStore.do?storeid="+storeId,
        dataType:"json",
        success:function(data){
            if(data.result==1){
                alert(data.message);
                location.reload();
            }
            else{
                alert(data.message);
            }
        }
    });
}

相关推荐