javascript - igGrid Infragistics 2012 是否可以控制插入回车和/或换行?

标签 javascript infragistics carriage-return ignite-ui iggrid

是否可以在igGrid Infragistics控件中插入

carriage return / line feed

在单元格的文本内?

例如给定下一个数据源:

var ds = [
        { "Id": 1, "Name": "Adjustable \\r\\n Race", "ProductNumber": "AR-5381", "soldi" : 10.10 },
        { "Id": 2, "Name": "Bearing Ball", "ProductNumber": "BA-8327", "soldi" : 20.10  },
        { "Id": 3, "Name": "BB Ball Bearing", "ProductNumber": "BE-2349", "soldi" : 30.10  }
    ];

您可以在“Adjustable”和“Race”之间看到字符“\r\n”,但它不起作用...我尝试过:

"\r", "\r\n", "\line", "<br />", "&#13;"

在每次测试中,我在屏幕上看到的是字符而不是新行...也许有一个我不知道的设置...

如果您需要完整的测试示例:

<!doctype html>
<html>
<head>
    <!-- Infragistics Combined CSS -->
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <link href="Scripts/jqueryUI/css/humanity/jquery-ui-1.9.2.custom.css" rel="stylesheet" />

    <link href="./Scripts/InfragisticsNetAdvantage2012.1/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" />
    <link href="./Scripts/InfragisticsNetAdvantage2012.1/css/structure/infragistics.css" rel="stylesheet" type="text/css" />        

    <script type="text/javascript" src="./Scripts/jquery-1.8.3.min.js"></script>

    <script type="text/javascript" src="./Scripts/jquery.hotkeys-0.8.js"></script>
    <script type="text/javascript" src="./Scripts/jqueryUI/jquery-ui-1.9.2.custom.js"></script>
    <script type="text/javascript" src="./Scripts/jquery.ba-outside-events.min.js"></script>

    <script type="text/javascript" src="./Scripts/InfragisticsNetAdvantage2012.1/Scripts/jquery.min.js"></script>
    <script type="text/javascript" src="./Scripts/InfragisticsNetAdvantage2012.1/Scripts/jquery-ui.min.js"></script>
    <script type="text/javascript" src="./Scripts/InfragisticsNetAdvantage2012.1/Common/jQuery/Common/js/infragistics.loader.js"></script>

    <script src="./Scripts/InfragisticsNetAdvantage2012.1/Scripts/jquery.tmpl.js" type="text/javascript"></script>        
    <script src="./Scripts/InfragisticsNetAdvantage2012.1/Common/jQuery/Common/js/infragistics.js" type="text/javascript"></script>
    <script type="text/javascript">

   var ds = [
        { "Id": 1, "Name": "Adjustable \\r\\n Race", "ProductNumber": "AR-5381", "soldi" : 10.10 },
        { "Id": 2, "Name": "Bearing Ball", "ProductNumber": "BA-8327", "soldi" : 20.10  },
        { "Id": 3, "Name": "BB Ball Bearing", "ProductNumber": "BE-2349", "soldi" : 30.10  },
        { "Id": 4, "Name": "Headset Ball Bearings", "ProductNumber": "BE-2908", "soldi" : 40.10  },
        { "Id": 316, "Name": "Blade", "ProductNumber": "BL-2036", "soldi" : 50.10  },
        { "Id": 317, "Name": "LL Crankarm", "ProductNumber": "CA-5965", "soldi" : 60.10  },
        { "Id": 318, "Name": "ML Crankarm", "ProductNumber": "CA-6738", "soldi" : 70.10  },
        { "Id": 319, "Name": "HL Crankarm", "ProductNumber": "CA-7457", "soldi" : 80.10  },
        { "Id": 320, "Name": "Chainring Bolts", "ProductNumber": "CB-2903", "soldi" : 10.10 }
    ];

    $(function () {

        $("#gridUpdating").igGrid({
            primaryKey: "Id",
            renderCheckboxes: true,
            columns: [
                { headerText: "Make Flag", key: "MakeFlag", dataType: "bool",  readOnly: false, width: "200"},
                { headerText: "Product ID", key: "Id", dataType: "number", width: "200"  },
                { headerText: "Product Name", key: "Name", dataType: "string", width: "200" },
                { headerText: "Product Number", key: "ProductNumber", dataType: "string" , width: "200" },
                { headerText: "soldi", key: "soldi", dataType: "number" , width: "200", format: "##.##,##" }
            ],

            dataSourceType: "json",

            dataSource: ds,

            headerRendered: function(evt, ui) {
                console.log($($('#gridUpdating').igGrid("headersTable")).html());
            },

            rowsRendered: function(evt, ui) {
                $.each(ui.owner.element.find("tr td:nth-child(5)"), function() {
                    var row = $(this).closest('tr')
                    rowId = $(row).attr("data-id");
                    if(rowId){
                        $(this).html((parseFloat($(this).html(),10).toFixed(2)).toString().replace(".",","));
                    }
                });

                $.each(ui.owner.element.find("tr td:nth-child(1)"), function() {
                    var row = $(this).closest('tr')
                    rowId = $(row).attr("data-id");
                    if(rowId){
                        $(this).html("<input type='checkbox' name='chk' id='chk_" + rowId + "' />");
                    }
                });

                $(ui.owner.element.find("tr td:nth-child(1)")).bind('click', function(){

                    var row = $(this).closest('tr')
                    rowId = $(row).attr("data-id");

                })
            },

            features: [
            {
                name: "Updating",
                enableAddRow: true,
                editMode: "none",
                enableDeleteRow: false,
                rowDeleting: function (e, args) 
                { 
                    alert(1);
                },
                rowDeleted: function (e, args){ 
                    alert(2);
                },
                columnSettings: [
                    { columnKey: "MakeFlag", editorOptions: { type: "bool", readOnly: false, disabled: false} },
                    { columnKey: "Id", editorOptions: { type: "numeric", readOnly: true, disabled: true} },
                    { columnKey: "Name", editorOptions: { type: "bool", readOnly: true, disabled: true} },
                    { columnKey: "ProductNumber", editorOptions: { type: "bool", readOnly: true, disabled: true} }
                ]
            }]
        });


    });
    function bind(){
        $("#gridUpdating").igGrid("option", "dataSource", ds);
        $("#gridUpdating").igGrid("dataBind");
    }

    </script>
</head>
<body>
    <table id="gridUpdating"></table>
    <input type="button" value="BIND" onclick="bind();" />


</body>
</html>

最佳答案

过了一段时间我发现我的问题出在我用来使用服务器代码的代理服务中,它对每个特殊字符进行 html 编码,例如“< br/>”我收到“<brr”/> ;”,所以我只需在绑定(bind)之前将其替换为“
”...

关于javascript - igGrid Infragistics 2012 是否可以控制插入回车和/或换行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35378788/

相关文章:

javascript - 实时检测文本框中的内容?

javascript - 单击按钮保存客户端生成的图像

java - Java中的回车\换行

php - 回车在 javascript-php 上下文中的意义是什么?

javascript - 如何使用 Ajax、Json 和 Node.js 刷新表格数据

javascript - 使用 jQuery UI hide ("slide") 时如何防止页面向下滚动?

asp.net-mvc - 如何在单击按钮时重新绑定(bind) igGrid igniteUI 控件中的数据?

C# 基础设施 UltraDockManager

language-agnostic - 回车符\r和换行符\n是否应该始终一起使用?\r\n

javascript - 使用 JS 获取单选按钮值数组