首页 技术 正文
技术 2022年11月18日
0 收藏 730 点赞 4,596 浏览 3371 个字

1、在jqgrid表格中增加列,内容是图标,定义图标单击事件,可以操作这一行的数据,如下图

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 == ) {
$("#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() - ,
autowidth: true,
colModel: [
{ label: '编码', name: 'clid', index: 'clid', width: , align: 'left', hidden: false ,key:true },
{ label: '车身编码', name: 'vehicle_code', index: 'vehicle_code', width: , align: 'left', hidden: false },
{ label: '车牌号码', name: 'cph', index: 'cph', width: , align: 'left' }, {
label: '启用', name: 'flag', index: 'flag', width: , align: 'center',
formatter: function (cellvalue, options, rowObject) {
if (cellvalue == '') return "<img onclick='imgClick(\"" + options.rowId +"\",0)' src='../../Content/Images/Icon16/accept.png'/>";
if (cellvalue == '') return "<img onclick='imgClick(\"" + options.rowId + "\",0)' src='../../Content/Images/Icon16/cross_shield.png'/>";
},
},
{
label: '详情', name: '', index: 'operate', width: , align: 'center',
formatter: function (cellvalue, options, rowObject) {
var detail="<img onclick='btn_detail(\""+ rowObject.clid + "\")'' title='详细信息' src='../../Content/Images/Icon16/application_view_detail.png' style='padding:0px 10px'>";
return detail;
},
},
],
viewrecords: true,
rowNum: ,
rowList: [, , , , ],
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() - );
});
} 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, , 'success');
}
else
{
tipDialog(Data.Message, , '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", "车辆详情", , , function (iframe) {
top.frames[iframe].AcceptClick();
});
}
}</script>

4、后台代码

  //用户审核及启用
public ActionResult ChangeState(string id, int type)
{
if (string.IsNullOrEmpty(id))
{
return Content(new JsonMessage { Success = false, Code = "-1", Message = "车辆id为空." }.ToString());
}
try
{
SYS_AMBUL_INFO entity = base_ambll.Repository().FindEntity(id);
//启用、未启用
if (type == )
{
entity.FLAG = entity.FLAG == ? : ; } else
return null;
int IsOk = base_ambll.Repository().Update(entity);
return Content(new JsonMessage { Success = true, entity = entity, Message = "操作成功" }.ToString());
}
catch (Exception ex)
{
return Content(new JsonMessage { Success = false, Code = "-1", Message = "操作失败:" + ex.Message }.ToString());
}
}

5、注意点:

5.1  由于数据库主键字段不是id,而是clid。所以前台colModel要设置列clid的key:true

{ label: ‘编码’, name: ‘clid’, index: ‘clid’, width: 80, align: ‘left’, hidden: false },

如果不设置,这样在前端获取rowid的时候就一直获取到的是序号,效果如下:

jqgrid 加按钮列

{ label: ‘编码’, name: ‘clid’, index: ‘clid’, width: 80, align: ‘left’, hidden: false ,key:true },

jqgrid 加按钮列

5.2  由于clid是前面带0的数字,在传值时要转换为字符串,不然传值会不准确

在options.rowId左右加双引号

return “<img onclick=’imgClick(\”” + options.rowId +”\”,0)’ src=’../../Content/Images/Icon16/accept.png’/>”;

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,111
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,584
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,431
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,203
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,838
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,922