Js/JQuery根据模板生成页面元素

Faker__

已于 2022-03-18 10:57:13 修改

阅读量1k

点赞数

分类专栏： jquery 文章标签： javascript 前端开发语言 jquery

于 2022-03-18 09:10:38 首次发布

本文链接：https://blog.csdn.net/Faker__/article/details/123565943

版权

jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

编写fotmat函数

function format(source, params) {
    if (arguments.length === 1)
        return function () {
            var args = $.makeArray(arguments);
            args.unshift(source);
            return $.format.apply(this, args);
        };
    if (arguments.length > 2 && params.constructor !== Array) {
        params = $.makeArray(arguments).slice(1);
    }
    if (params.constructor !== Array) {
        params = [params];
    }
    $.each(params, function (i, n) {
        source = source.replace(new RegExp("\\{" + i + "\\}", "g"), n);
    });
    return source;
};

调用目标并生成元素

  function createTaskBox(taskList) {
            console.log(taskList)
            $.each(taskList, function (index, item) {
                console.log(index)
                let title = (index+1) + '.' + item.taskKey
                let handler = item.receivername
                let handlerPhone = item.receiverPhone
                let action = item.taskKey
                let dealTime = item.updateTime
                let template = `  <div class="task-box">
                <div class="task-title">{0}</div>
                <div class="flex-content taskInfo">
                    <div class="label">处理人:</div>
                    <div class="content">
                        <span class="handler">{1}</span>
                        <div class="right-float">
                            处理人手机号码:
                            <span>{2}</span>
                        </div>
                    </div>
                </div>
                <div class="flex-content taskInfo">
                    <div class="label">执行动作:</div>
                    <div class="content">
                        <span class="action">{3}</span>
                        <div class="right-float">
                            处理时间:
                            <span class="handleTime">{4}</span>
                        </div>
                    </div>
                </div>
            </div>`
                let taskResult = format(template, title, handler, handlerPhone, action, dealTime)//将数据填入模板
                $('#task-list').append(taskResult + '')
            })
            const last = $('.task-box').last();
            last.children('.task-title').addClass('act')
        }