easyUI DataGrid基础

来源：互联网发布：淘宝兼职刷客是真的吗编辑：程序博客网时间：2024/05/19 22:27

表格的代码

<!--表格--><table id="listData" url="/Cpxx/GetListData" title="列表" iconCls="icon-table" pagination="true"remoteSort="false" singleSelect="false" pageSize="20" rownumbers="true" toolbar="toolbar" >     <thead>           <tr>             <th field="@Html.FieldFor(model => model.Cplb)" width="100" align="left">@Html.FieldLabelFor(model => model.Cplb)</th>            <th field="@Html.FieldFor(model => model.Addtime)" width="100" align="left" formatter="jsonDataToLongString">@Html.FieldLabelFor(model => model.Addtime)</th>            <th field="@Html.FieldFor(model => model.Mc)" width="100" align="left">@Html.FieldLabelFor(model => model.Mc)</th>            <th field="@Html.FieldFor(model => model.Shrs)" width="100" align="left">@Html.FieldLabelFor(model => model.Shrs)</th>            <th field="@Html.FieldFor(model => model.Yj)" width="100" align="left">@Html.FieldLabelFor(model => model.Yj)</th>            <th field="@Html.FieldFor(model => model.Xj)" width="100" align="left">@Html.FieldLabelFor(model => model.Xj)</th>            <th field="@Html.FieldFor(model => model.Tpdz)"  width="100" align="left">@Html.FieldLabelFor(model => model.Tpdz)</th>            <th field=" " width="100" align="left" formatter="formatOper" >状态</th>             <th field="_operate" width="150" align="left" formatter="xgsc" >操作</th>        </tr>             </thead> </table>

field是字段

formatter是JS方法

这个是按钮的JS方法

    function xgsc(val, row, index) {        return '<input id="sj" type="button" value="删除" onclick="Del(' + index + ')" />  <input id="sj" type="button" value="修改" onclick="Edi(' + index + ')" />';    }    function Del(index) {        $('#listData').datagrid('selectRow', index); // 关键在这里          var row = $('#listData').datagrid('getSelected');        if (row) {            window.location.href = '/Cpxx/Delete/' + row.Id;        }    }    function Edi(index) {        $('#listData').datagrid('selectRow', index); // 关键在这里          var row = $('#listData').datagrid('getSelected');        if (row) {            openDialog("editWindow", "修改", "/Cpxx/edit/" + row.Id);        }    }

这个是图片的方法

    function formatOper(val, row, index) {        var hz="";        var sj = '<img src="../../Content/icons/excel.png" />';        var rm = '<img src="../../Content/icons/delete.png" />';        var xc = '<img src="../../Content/icons/add.png" />';        var lt = '<img src="../../Content/icons/edit.png" />';        if (row.Sfsj == true) {            hz += sj;        }        if (row.Sfrm == true) {            hz += rm;        }         if (row.Sfxc == true) {             hz += xc;        }        if (row.Sflt == true) {            hz += lt;        }        return hz;    }

下面是效果图

0 0