Question

我在Reactjs组件中使用了Shield UI grid，如下所示：

class Grid extends Component {

  componentDidMount() {

    $("#grid").shieldGrid({
        dataSource: {
            remote: {
                read: "http://jsonplaceholder.typicode.com/todos",
                modify: {
                    create: {
                        url: "/gridData/EmployeeCreate",
                        type: "post",
                        data: function (edited) {
                            return {
                                userId: edited[0].data.userId,
                                id: edited[0].data.id,
                                title: edited[0].data.title,
                                completed: edited[0].data.completed
                            };
                        }
                    },
                    update: {
                        url: "/employees/EmployeeUpdate",
                        type: "post",
                        data: function (edited) {
                            return { 
                                userId: edited[0].data.userId,
                                id: edited[0].data.id,
                                title: edited[0].data.title,
                                completed: edited[0].data.completed
                            };
                        }
                    },
                    remove: {
                        url: "/employees/EmployeeRemove",
                        type: "post",
                        data: function (removed) {
                            return { ID: removed[0].data.userId };
                        }
                    }
                }
            },
            schema: {
                fields: {
                    userId: { path: "userId", type: String },
                    id: { path: "id", type: String },
                    title: { path: "title", type: String },
                    completed: { path: "completed", type: Boolean }
                }
            },
            group:[{ field: "id", order: "desc" }],
        },
        paging: {
            pageSize: 10,
            messages: {
                infoBarTemplate: "{0} - {1} از {2} رکورد"
            }
        },
        rowHover: false,
        columns: [
            { field: "id", title: "id", width: "100px" },
            { field: "userId", title: "userId"},
            { field: "title", title: "title" },
            { field: "completed", title: "completed" },
            {
                width: 150,
                title: " ",
                buttons: [
                    { commandName: "edit", caption: "ویرایش" },
                    { commandName: "delete", caption: "حذف" }
                ]
            }
        ],
        editing: {
            enabled: true,
            mode: "popup",
            confirmation: {
                "delete": {
                    enabled: true,
                    template: function (item) {
                        return "Delete product with name '" + item.id + "'?";
                    }
                }
            }
        },
        toolbar: [
            {
                buttons: [
                    { commandName: "insert", caption: "+ جدید" }
                ],
                position: "top"
            }
        ],
            grouping: {
            showGroupHeader: true,
            allowDragToGroup: true,
            message: "برای گروهبندی ستونی را انتخاب کنید"
        },
        scrolling: true,
        resizing: true,
        sorting:true
    });

    var dataSource = $("#grid").swidget().dataSource,
            input = $("#filterbox input"),
            timeout,
            value;
        input.on("keydown", function () {
            clearTimeout(timeout);
            timeout = setTimeout(function () {
                value = input.val();
                if (value) {
                    dataSource.filter = {
                        or: [
                            { path: "id", filter: "contains", value: value },
                            { path: "userId", filter: "contains", value: value },
                            { path: "title", filter: "contains", value: value },
                            { path: "completed", filter: "contains", value: value }
                        ]
                    };
                }
                else {
                    dataSource.filter = null;
                }
                dataSource.read();
            }, 300);
    });
    }

  render() {

    return (
        <div className="sui-rtl">
            <div id="filterbox">
                <input type="text" placeholder="جستجو کنید..."/>
            </div>
            <div id="grid">111</div>
        </div>
    );
  }
}

export default Grid;

一切正常，但我想将英文数字转换成波斯数字。我在componentDidMount中修改了代码转换但没有改变。

如何将英文数字转换为波斯数字？

Answer 1

这个Stack Overflow问题上有很多实用程序函数可以执行此操作：

how to replace numbers in body to persian numbers?

此外，您还拥有此库，可为此目的提供帮助函数：

https://github.com/usablica/persian.js

Answer 2

您可以使用pageLabelTemplate属性将页码转换为波斯语字符串，如下所示：

$("#grid").shieldGrid({
    paging: {
        pageSize: 20,
        messages: {
            pageLabelTemplate: function(num) {
                return "Persian " + num;
            }
        }
    }
});

使用Shield UI Grid与ReactJS

2 个答案: