jqgrid 列顯示圖片


<script>
    var img;
    //自定義圖片的格式,可以根據rowdata自定義
    function alarmFormatter(cellvalue, options, rowdata) {
        return ' <img src="/Content/4.jpg" id="img' + rowdata.Id + '"  style="width:50px;height:50px;" />';
    }
    $(function () {
        $('#imgDialog').hide();

        //var data = { "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='" + 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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM