首页 > 代码库 > jqgrid 列显示图片
jqgrid 列显示图片
<script> var img; //自定义图片的格式,可以根据rowdata自定义 function alarmFormatter(cellvalue, options, rowdata) { return ‘ <img src="http://www.mamicode.com/Content/4.jpg" id="img‘ + rowdata.Id + ‘" style="width:50px;height:50px;" />‘; } $(function () { $(‘#imgDialog‘).hide(); //var data = http://www.mamicode.com/{"appId": AppId,"appGroupId": currentNode, "PageNumber": 1, "PageSize": 20 }; $("#gridTable").jqGrid({ datatype: "json", //postData: data, url: "home/List", mtype: ‘POST‘, colNames: [‘姓名‘, ‘性别‘, ‘帐号‘, ‘地点‘, ‘会员等级‘, ‘图片‘], colModel: [ { name: ‘UserName‘, width: 60, sortable: false }, { name: ‘UserSex‘, width: 60, sortable: false, align: "center" }, { name: ‘LoginAccount‘, width: 60, sortable: false }, { name: ‘Address‘, width: 100, sortable: false }, { name: ‘Rank‘, width: 100, hidden: false, sortable: false },
//下面这句代码是加入图片的关键, { name: ‘dsource_alarm‘, index: ‘dsource_alarm‘, width: 100, align: "center", sortable: false, editable: false, formatter: alarmFormatter } ], height: ‘100%‘, gridComplete: function () { $(‘#gridTable img‘).hover(function (e) { $("body").append("<div id=‘preview‘><img src=http://www.mamicode.com/‘" + this.src + "‘ alt=‘Image preview‘/></div>"); $("#preview") .css("top", (e.pageY) + "px") .css("left", (e.pageX) + "px") .fadeIn("fast"); } , function () { $("#preview").remove(); }).click(function () { $(‘#imgDialog img‘).attr(‘src‘, this.src); $(‘#imgDialog‘).dialog({ autoOpen: true, buttons: { "Ok": function () { $(this).dialog("close"); }, "Close": function () { $(this).dialog("close"); } }, draggable: true, resizable: false, bgiframe: true }); img = this; }); } }); });</script>
jqgrid 列显示图片
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。