EasyUi datagrid window

工作需要做了以下的demo
window里面装了一个datagrid
1.datagrid自动适应window的大小，当window resize的时候自动适应。
2.datagrid里面加一个custom列，且绑定点击事件。能拿到当前列的rowData

<div id="w" class="easyui-window" title="Basic Window" data-options="iconCls:'icon-save'" style="width: 800px; height: 200px; padding: 10px;">

    <table class="easyui-datagrid" id="dg" data-options="fitColumns:true,singleSelect:true,autoRowHeight:true,fit: true">
        <thead>
            <tr>
                <th data-options="field:'code'">Code</th>
                <th data-options="field:'name'">Name</th>
                <th data-options="field:'price'">Price</th>
                <th data-options="field:'price1',formatter:formatCustomerId">操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>001</td>
                <td>name1ddasasasasasasasasasasasasasasaaaaaaaaaaaaaaaaaaaaaaaaa</td>
                <td>2323</td>
                <td>2323</td>
            </tr>
            <tr>
                <td>002</td>
                <td>name2</td>
                <td>4612</td>
                <td>2323</td>
            </tr>
        </tbody>
    </table>
</div>
<button id="bu" value="aaa"></button>
    <a href='#' class='easyui-linkbutton'>操作</a>
<script type="text/javascript">
    $(function () {
        //$("#bu").click(function() {
        //    $('#dg').datagrid('resize');
        //});
        //$("#w").resizable({
        //    onStopResize: function () {
        //        //$("#dg").width($("#id").width());
        //        alert('a');
        //        $('#dg').datagrid('resize');
        //    }
        //});
    });
    function formatCustomerId(val, row, index) {
        return '<a href="#" onClick="test('+index +')">操作</a>';
    }

    function test(index) {
        $('#dg').datagrid('selectRow', index);
        var row = $('#dg').datagrid('getSelected');
        alert(index + row.name);
    }
</script>

 

转载于:https://www.cnblogs.com/yuzhengdong/p/4575731.html