Question

我正在使用jQuery网格在线创建表格。我想在我的一个单元格中为某些文本添加粗体和斜体，如果内容太多，我还想显示省略号。

当前的单元格内容为：

[Mary Doe]： - 这可以尽快完成吗？

我希望它显示为：

[Mary Doe]： - 这可以尽快完成吗？

此外，如果内容超出我希望它通过省略号连接。

如果你想使用它，这里是jsfiddle的链接：
https://jsfiddle.net/jo1qrysq/

var Data = [{"identification":"2001","created_date":"2017-09-25 05:48:50","quantity":1,"summary":"Require to rebuild","product":"D245","loc":"SG","assignee":"Hello World","requestor":"John Doe","status":"Requested","comments":"[Hello World] :- We do not have sufficient quantity","priority":"High","comment_on":"2017-09-26 05:00:18"},
{"identification":"2002","created_date":"2017-09-25 05:48:50","quantity":5,"summary":"Require to paint","product":"A205","loc":"MY","assignee":"Bye World","requestor":"Mary Doe","status":"In Progress","comments":"[Mary Doe] :- Can this be done soon?","priority":"High","comment_on":"2017-09-26 05:00:18"}
];

$(function () {
    "use strict";
    $("#grid").jqGrid({
      colNames:['ID','Comment','identification','Priority', 'Qnty', 'Summary', 'Product','Location','Assignee','Status'],
        colModel: [
            {name:'auto_id', key: true, width:18, hidden: true},
            {name: "comments"},
            { name: "identification",search:true, formatter: 'dynamicLink'},
            { name: "priority"},
            { name: "quantity" },
            { name: "summary" },
            { name: "product" },
            { name: "loc" },
            { name: "assignee" },
            {name: "status"}],
            data: Data,
            rowNum:20,
            rowList:[20,40,60],
            loadonce: true,
            toppager: '#pager2',
            autowidth : true,
            gridview: true,
            height: "auto",
            ignoreCase: true,
            viewrecords: true,
            caption:"A Table"      
    });
});

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css">    
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/css/ui.jqgrid.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/jquery.jqgrid.min.js"></script>
    <table id="grid"></table>

Answer 1

<td>[Mary Doe] :- Can this be done soon?</td>可以更改为<td><strong>[Mary Doe] :-</strong> Can this be done soon?</td>，或将'strong'替换为'b'。

至于省略号，请参阅this css property，text-overflow: ellipsis;

https://jsfiddle.net/jo1qrysq/1/

Answer 2

您有很多选择来实现您的要求。例如，您可以在jqGrid的所有单元格上添加text-overflow: ellipsis规则：

.ui-jqgrid tr.jqgrow td {
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}

请参阅https://jsfiddle.net/OlegKi/jo1qrysq/3/

您可以定义CSS规则，例如

.ui-jqgrid tr.jqgrow td.myellipsis {
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}

并在jqGrid的某些列中使用classes: "myellipsis"属性。见https://jsfiddle.net/OlegKi/jo1qrysq/5/

您使用免费的jqGrid工作，它支持基于内容宽度自动调整列。您可以使用

之类的设置

autowidth : true,
autoresizeOnLoad: true,
cmTemplate: { autoResizable: true },
autoResizing: { compact: true, resetWidthOrg: true },

请参阅https://jsfiddle.net/OlegKi/jo1qrysq/8/

您可以结合使用不同的方法。请参阅https://jsfiddle.net/OlegKi/jo1qrysq/6/和https://jsfiddle.net/OlegKi/jo1qrysq/7/

jQgrid - 如何自定义格式化单元格的内容？

2 个答案: