jqgrid 表头和内容带图标 示例代码

原创 ziyingyewu 随笔 JS 179阅读 2017-12-15 14:33:09 举报

<div class="gridPanel mapGridPanel" style="overflow-x: hidden;">
<table id="gridTable"></table>
<div id="gridPager"></div>
</div>

<script>
$(function () {

        //testJqGrid
        //初始化外框
        $(".gridPanel").css("height", document.body.clientHeight - 60);
        $(".gridPanel").css("width", document.body.clientWidth - 190);

        GetGrid();

        $(window).resize(function () {
            //重置外框宽度
            $(".gridPanel").css("height", document.body.clientHeight - 60);
            $(".gridPanel").css("width", document.body.clientWidth - 190);
            //重置表格宽度
            $("#gridTable").setGridWidth($(".gridPanel").width() * 0.999);
        });

    });

    //加载表格
    function GetGrid() {

        //设置表格内容
        var selectedRowIndex = 0;
        var $gridTable = $('#gridTable');
        $gridTable.jqGrid({
            url: "/ClientData/TestJson.txt",
            datatype: "json",
            height: "100%",
            autoheight: true,
            //width: "80%",
            autowidth: true,
            colModel: [
            { label: '河段', name: 'heduan', index: 'heduan', width: 100, align: 'center' },
            { label: '河长', name: 'hezhang', index: 'hezhang', width: 60, align: 'center' },
            { label: '\<img style=\'height:18px\' src=\'/images/z@2x.png\'\/\>', name: 'zan', index: 'zan', width: 60, align: 'center' },
            { label: '\<img style=\'height:18px\' src=\'/images/z1@2x.png\'\/\>', name: 'cai', index: 'cai', width: 60, align: 'center' },
            { label: '问题', name: 'wenti', index: 'wenti', width: 64, align: 'center' },
            { label: '\<img style=\'height:20px\' src=\'/images/z@2x.png\'\/\>', formatter: currencyFmatter },
            ],
            viewrecords: true,
            rowNum: "5",
            rowList: [5, 10, 20, 30],
            pager: "#gridPager",
            sortname: 'heduan',
            sortorder: 'desc',
            shrinkToFit: true,//此选项用于根据width计算每列宽度的算法。默认值为true。如果shrinkToFit为true且设置了width值,则每列宽度会根据width成比例缩放;如果shrinkToFit为false且设置了width值,则每列的宽度不会成比例缩放,而是保持原有设置,而Grid将会有水平滚动条。
            gridview: true,
            onSelectRow: function () {
                selectedRowIndex = $("#" + this.id).getGridParam('selrow');
            },
            gridComplete: function () {

                $("#" + this.id).setSelection(selectedRowIndex, false);
            }
        });

    }

    //自定义的格式化方法
    function currencyFmatter() {
        return "<img src='/images/z@2x.png' style='height:20px'/>";
    }

</script>
评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复