1、在jqgrid表格中增加列,内容是图标,定义图标单击事件,可以操作这一行的数据,如下图
2、前台代码
<div id="grid_List">
<table id="gridTable" class="datatable"></table>
<div id="gridPager"></div>
</div>
3、js代码
<script type="text/javascript">
$(document).ready(function () {
GetGrid();
//绑定键盘按下事件
$(document).keypress(function (e) {
//回车键事件
if (e.which == 13) {
$("#keywords").focus();
$("#keywords").select();
$("#btnSearch").click();
}
});
});
//加载表格
function GetGrid() {
var SelectRowIndx;
$("#gridTable").jqGrid({
url: "@Url.Content("~/Vehicle/Vehicle/GridPageListJson")",
datatype: "json",
mtype: 'POST',
height: $(window).height() - 130,
autowidth: true,
colModel: [
{ label: '编码', name: 'clid', index: 'clid', width: 80, align: 'left', hidden: false ,key:true },
{ label: '车身编码', name: 'vehicle_code', index: 'vehicle_code', width: 100, align: 'left', hidden: false },
{ label: '车牌号码', name: 'cph', index: 'cph', width: 100, align: 'left' },
{
label: '启用', name: 'flag', index: 'flag', width: 45, align: 'center',
formatter: function (cellvalue, options, rowObject) {
if (cellvalue == '0') return "<img οnclick='imgClick(\"" + options.rowId +"\",0)' src='../../Content/Images/Icon16/accept.png'/>";
if (cellvalue == '1') return "<img οnclick='imgClick(\"" + options.rowId + "\",0)' src='../../Content/Images/Icon16/cross_shield.png'/>";
},
},
{
label: '详情', name: '', index: 'operate', width: 50, align: 'center',
formatter: function (cellvalue, options, rowObject) {
var detail="<img οnclick='btn_detail(\""+ rowObject.clid + "\")'' title='详细信息' src='../../Content/Images/Icon16/application_view_detail.png' style='padding:0px 10px'>";
return detail;
},
},
],
viewrecords: true,
rowNum: 30,
rowList: [30, 50, 100, 500, 1000],
pager: "#gridPager",
sortname: 'CLID',
sortorder: 'desc',
rownumbers: true,
shrinkToFit: true,
gridview: true,
//multiselect: true,
onSelectRow: function () {
SelectRowIndx = GetJqGridRowIndx("#" + this.clid);
},
gridComplete: function () {
//LoadViewList();
//$("#" + this.id).jqGrid('setSelection', SelectRowIndx);
}
});
//自应高度
$(window).resize(function () {
$("#gridTable").setGridHeight($(window).height() - 178);
});
}
function imgClick(rowid,type)
{
if(rowid=="")
return;
AjaxJson("//Vehicle/Vehicle/ChangeState", { id:rowid,type:type}, function (Data) {
if (Data.Success == true) {
$("#gridTable").setCell(rowid, 'flag', Data.entity.FLAG);
tipDialog(Data.Message, 2, 'success');
}
else
{
tipDialog(Data.Message, 2, 'warning');
}
});
}
//明细
function btn_detail(id) {
var KeyValue = GetJqGridRowValue("#gridTable", "clid");
if (id!=null) {
KeyValue=id;
}
if (IsChecked(KeyValue)) {
var url = "/Vehicle/Vehicle/Detail?KeyValue=" + KeyValue;
Dialog(url, "Detail", "车辆详情", 750, 300, function (iframe) {
top.frames[iframe].AcceptClick();
});
}
}
</script>