این سایت برای ie9 طراحی نشده است

لطفا دستگاه خود را بچرخانید.

چگونه رنگ آیتم های یک لیست را تغییر دهیم؟

۲ دی ۱۳۹۵ راحله عباسی فشمی
بدون دیدگاه

گاهی برای ایجاد وضوح بیشتر یا مورد توجه قرار گرفتن فیلدی از یک آیتم و یا کل اطلاعات یک آیتم نیاز به Bold کردن آن آیتم می باشد. این Bold کردن را می توانیم با رنگی کردن متن آیتم ، رنگی کردن Back ground آن و … پیاده سازی کنیم. یک راه ساده برای دست یافتن به فرمت دلخواه ، استفاده از jQuery می باشد.

در مثالی که در این مطلب ارائه می کنم ، رنگ فیلد Priority ، در صورتی که اولویت انجام تسک “Normal” باشد، آبی و در صورتی که “High” باشد، به رنگ قرمز تغییر می کند.

(function () {
    var condFieldCtx = {};

    condFieldCtx.Templates = {};

    condFieldCtx.Templates.Fields = {
        "Priority": { "View": PriorityFormat }       
};
condFieldCtx.OnPostRender = [HighlightRowOverride];
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(condFieldCtx);
})();


function PriorityFormat(ctx) {
    var priorityValue = ctx.CurrentItem.Priority;

    if (priorityValue.indexOf('High') != -1) {
        return "<span><font style='color:red;display:block;'>" + ctx.CurrentItem.Priority + "</font></span>";
    }
    else if (priorityValue.indexOf('Normal') != -1)
    {
        return "<span><font style='color:#008BD8;display:block;'>" + ctx.CurrentItem.Priority + "</font></span>";
    }
    else {
        return ctx.CurrentItem.Priority;
    }

}


function HighlightRowOverride(ctx) {
    for (var i = 0; i < ctx.ListData.Row.length; i++) {
        var listItem = ctx.ListData.Row[i];
        var iid = GenerateIIDForListItem(ctx, listItem);
        var row = document.getElementById(iid);

        if (listItem.Marked == "Yes") {
            row.style.backgroundColor = "rgba(4,92,8,0.1)";
        }
    }
    ctx.skipNextAnimation = true;
}

پس از ایجاد فایل جاوااسکریپت فوق آن را با نام ChangeColor.js ذخیره کرده ، با استفاده از sharepoint designer به مسیر Master Pages\Display Templates رفته فایل js مورد نظر را Import کنید. سپس در سایت به لیست هدف رفته ، گزینه ی Edit Page  را انتخاب کنید و وب پارت موجود را Edit کرده در بخش Miscellaneous  ، در قسمت JS Link ، آدرس فایل مورد نظر ” site/masterpage/Display Templates/changeColor.js~ “را کپی کنید.