easyUI DataGrid基础
2013-12-31 15:14
134 查看
表格的代码
field是字段
formatter是JS方法
这个是按钮的JS方法
这个是图片的方法
下面是效果图
<!--表格--> <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; }
下面是效果图
相关文章推荐
- 从零基础认识easyUI的dataGrid
- DataTables VS EasyUI DataGrid 基础应用 转
- C++ socket编程基础一(概念和常用API)
- 【easyui】jQuery EasyUI Datagrid组件的完整的基础DOM结构
- [easyui]datagrid新增一行编辑时,给editor:'numberbox'赋初值不成功的解决办法
- 【easyUI】禁用datagrid&treegrid复选框
- DOS 命令基础
- easyui datagrid 基础方法和事件
- Java基础:split 分割 字符串(分隔符如:* ^ : | , .) 及注意点
- Struts2 + easyui的DataGrid 分页
- 黑马程序员+第二章Java语言基础 第02天
- Monocular slam 中的理论基础(2)
- EasyUI的datagrid中<a>标签需要点两次才能触发事件的处理方法
- 黑马程序员+第二章Java语言基础 第03天
- EasyUi Datagrid的基础使用
- EasyUI datagrid URL请求参数
- 黑马程序员+第二章Java语言基础 第04天
- EasyUi Datagrid的基础使用
- 使用easyUI的datagrid显示查询得到的List<Object>对象
- EasyUI基础searchbox&progressbar(搜索框,进度条)