您的位置:首页 > 产品设计 > UI/UE

easyUI DataGrid基础

2013-12-31 15:14 134 查看
表格的代码

<!--表格-->
<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;
}


下面是效果图

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: