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 == ) {
$("#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的时候就一直获取到的是序号,效果如下:

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

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

在options.rowId左右加双引号

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

jqgrid 加按钮列的更多相关文章

  1. schtasks在win7下提示错误:无法加载列资源

    转自: http://blog.chinaunix.net/uid-24946452-id-2887851.html 查看cmd 编码 chcp 如使用 936中文GBK编码的话 schtasks.e ...

  2. SELECTION-SCREEN 加按钮

    这是我喜欢的这种模式,选择屏加个新建按钮,直接跳转到主屏幕做单据. 选择屏就直接查询,双击查询结果跳转到主屏幕.... 做好编辑控制,事件处理...EVERYTHING IS SOOOOOOO NIC ...

  3. C#点击按钮用DataGridView动态增加行、删除行,增加按钮列

    原来有一行: 点击添加,在下面增加同样的一行 新增加的行有一列删除按钮,点击某行的删除按钮时,删除当前行 方法: 哈哈,我果然好聪明啊 1.文本框.文本框.添加按钮 2.一个DataGridView( ...

  4. GridControl控件添加按钮列及在按钮Click事件中得到行数据 zt

    在GridControl中添加按钮列的步骤如下: 1. 把列的ColumnEdit属性设置为RepositoryItemButtonEdit 2. 把TextEditStyle属性设置为HideTex ...

  5. devexpress表格控件gridcontrol图片列,按钮列,时间列等特殊列的实现

    1.项目中经常会在表格中插入按钮列,图片列,表格列一些非文本的特殊列.如何在devexpress表格控件gridcontrol中实现呢?以下列举一个实现添加图片列,按钮列,时间列,按钮列,开关列的示例 ...

  6. JqGrid分页按钮图标不显示的bug

    开发中遇到的一个小问题,记录一下,如果有朋友也遇到了相同的问题,可以少走些弯路少花点时间. 如图: 分页插件使用了JqGrid,但是分页栏里出现了问题,上一页.下一页这些按钮的图标都显示为空,记得以前 ...

  7. jqGrid 加载完jqGrid之后可以执行函数的方法

    , gridComplete: function() { jQuery('#first_gridpager').html("首页 "); jQuery('#prev_gridpag ...

  8. jqgrid 设置冻结列

    有时,jqgrid表格的列非常多,而表格的宽度值是固定的,我们需要在表格底部出现滚动条,并且固定前面几个列作为数据参照项,如何实现? 需要用的jqgrid冻结列,步骤如下: 1)设置需要冻结的列属性, ...

  9. jquery easyui datagrid 动态 加载列

    实现方式: 首先根据输入的sql语句获得相关的列名称返回给前台,然后在datagrid中动态加载列,接着根据查询条件(包括sql语句)获取相关的记录返回给前台用于填充datagrid.从而实现类似or ...

随机推荐

  1. SQL 中 HAVING 用法

    现在 Student表有 如下数据 现需求如下: 查找每个老师的学生的平均年龄且平均年齿大于12 不使用 HAVING SELECT * FROM (SELECT TeacherID, AVG(Age ...

  2. BZOJ 4028: [HEOI2015]公约数数列 分块

    4028: [HEOI2015]公约数数列 题目连接: http://www.lydsy.com/JudgeOnline/problem.php?id=4028 Description 设计一个数据结 ...

  3. Java之——redis并发读写锁,使用Redisson实现分布式锁

    原文:http://blog.csdn.net/l1028386804/article/details/73523810 1. 可重入锁(Reentrant Lock) Redisson的分布式可重入 ...

  4. 记一个有趣的Java OOM!

    原文:https://my.oschina.net/u/1462914/blog/1630086 引言 熟悉Java的童鞋,应该对OOM比较熟悉.该类问题,一般都比较棘手.因为造成此类问题的原因有很多 ...

  5. zxing生成二维码和读取二维码

    当然,首先要导入zxing的jar包. 生成二维码代码: package com.imooc.zxing; import java.io.File; import java.nio.file.Path ...

  6. synchronized-异常

    对于web应用程序,异常释放锁的情况,很可能对你的应用程序业务逻辑产生必要严重的错误,比如:执行某个队列任务,很多对象都会去等待第一个对象正常执行的结果返回再次去释放锁,那么其中摸个对象发生执行异常了 ...

  7. ashx 下载文件

    ashx后台 byte[] file =GetFileByte(""); Response.ContentType = "application/octet-stream ...

  8. TensorFlow进阶(三)---变量的创建、初始化

    变量的的创建.初始化.保存和加载 其实变量的作用在语言中相当,都有存储一些临时值的作用或者长久存储.在Tensorflow中当训练模型时,用变量来存储和更新参数.变量包含张量(Tensor)存放于内存 ...

  9. TensorFlow环境搭建及安装教程

    1.安装虚拟环境virtualenv相关配置(创建了python3.5的环境) 2.http://docs.nvidia.com/cuda/cuda-installation-guide-linux/ ...

  10. 在执行migrate的时候出现问题(错误见末尾): django.db.utils.OperationalError: (1045, "Access denied for user ‘ODBC‘@‘localho st‘ (using password: YES)")

    Python框架之Django的数据库 在执行migrate的时候出现问题(错误见末尾) django.db.utils.OperationalError: (1045, "Access d ...