easyui datagrid自定义按钮列,即最后面的操作列

Posted 2021-02-05 flyingcloude

在很多时候我们要在表格的最后添加一列操作列,easyUI貌似没有提供种功能,不过没关系,我们可以自定义来实现
首先是html部分

    <table id="tt" class="easyui-datagrid" style="width:100%;height:554px"
             singleSelect="false"
             fitColumns="true"
             title="部门列表"
             rownumbers="true"
             pagination="true"  
             conCls="icon-search"
             toolbar="#tb2"
             url="${pageContext.request.contextPath}/order/getAllOrder.do">
        <thead>
            <tr>
                <th field="ck" checkbox="true"></th>
                <th field="order_code" width="80">订单编号</th>
                <th field="consumer.consumer_name"
                    data-options="formatter:function(value,rec){return rec.consumer.consumer_name}"
                    width="80">客户名称</th>
                <th field="employees.emp_realname"
                    data-options="formatter:function(value,rec){return rec.employees.emp_realname}"
                    width="80">下单员工</th>
                <th field="order_time" width="80" formatter="formatOrderDate">下单时间</th>
                <th field="order_state" width="80" formatter="formatOrderState">订单状态</th>
                <th data-options="field:‘_operate‘,width:80,align:‘center‘,formatter:formatOper">订单详情</th>  
            </tr>
        </thead>
    </table>

    function formatOper(val,row,index){  
                return ‘<a href="#" onclick="editUser(‘+index+‘)">订单详情</a>‘;  
    }
/*
formatOper()函数中有三个参数,val指当前单元格的值,row,当前行对象,index当前行的索引.这里我们就需要这个index
我把这个index传入了一个叫editUser的函数中,为什么要传这个index呢,我们在来看下这个editUser函数
*/