jquery 需要在ASP.NETMVC的JQGrid中显示Show More / Show Less选项

dy1byipe  于 2023-06-22  发布在  jQuery
关注(0)|答案(1)|浏览(174)

我有要求,我需要如何显示更多/显示更少的选项,在一列附加到值,我从DB例如:ABC,ABD,ABE,...显示更多,反之亦然,如果长度超过一定的限制,则显示全部值。不知道如何通过jQuery实现这种场景。任何帮助这是非常感谢。
示例表结构如下所示。

Col1    Col2    Col3
 1      Test  ABC, ABD,...Show More

Col1    Col2    Col3
 1      Test  ABC, ABD, ABE, ABF, ABG...Show Less

“显示更多”和“显示更少”需要一个超链接来激活一个功能,以隐藏和如何分别。
谢谢

qzwqbdag

qzwqbdag1#

示例:
我假设你包括ui.jqgrid.min.css和jquery.jqgrid.min.js。

$(function () {
    $("#grid").jqGrid({
        url: 'your_data_url',
        datatype: 'json',
        colModel: [
            { name: 'Col1', index: 'Col1', width: 50 },
            { name: 'Col2', index: 'Col2', width: 100 },
            {
                name: 'Col3', index: 'Col3', width: 200,
                formatter: showMoreFormatter
            }
        ],
        // Other jqGrid options...
    });

    function showMoreFormatter(cellValue, options, rowObject) {
        var maxLength = 10; // Maximum number of values to display
        var showMoreText = 'Show More';
        var showLessText = 'Show Less';

        var values = cellValue.split(','); // Assuming the values are comma-separated
        if (values.length > maxLength) {
            var displayedValues = values.slice(0, maxLength).join(', ');
            var hiddenValues = values.slice(maxLength).join(', ');

            return displayedValues + ', ' +
                '<a href="#" class="show-more-link" data-hidden-values="' + hiddenValues + '">' +
                showMoreText +
                '</a>';
        } else {
            return cellValue;
        }
    }
});

$(document).on('click', '.show-more-link', function (e) {
    e.preventDefault();

    var link = $(this);
    var hiddenValues = link.data('hidden-values');
    var showMoreText = 'Show More';
    var showLessText = 'Show Less';

    if (link.text() === showMoreText) {
        link.text(showLessText);
        link.closest('tr').find('td[aria-describedby="grid_Col3"]').append(hiddenValues);
    } else {
        link.text(showMoreText);
        link.closest('tr').find('td[aria-describedby="grid_Col3"]').text(link.data('displayed-values'));
    }
});

根据jqGrid生成的HTML结构调整JavaScript代码中的选择器和属性值。对于jqGrid设置,使用从服务器检索所需数据的真实URL更新'your_data_url'。请注意,这两个更改可能都是必要的。
对于您独特的数据格式和需求,可以更改代码。在这种情况下,假设服务器为'Col 3'列返回逗号分隔的字符串。
点击“Col 3”列中的“显示更多”链接将授予对选定数量的值的访问权,而链接本身将经历转换为“显示更少”以再次保护隐藏数据。
希望这有帮助!:)

相关问题