JSLink文件中使用field的自定义属性

最新推荐文章于 2021-11-28 21:20:28 发布

计算机器

最新推荐文章于 2021-11-28 21:20:28 发布

阅读量2.5k

点赞数

分类专栏： SharePoint 研究文章标签： JSLink 自定义属性样式

本文链接：https://blog.csdn.net/shrenk/article/details/47007553

版权

SharePoint 研究专栏收录该内容

86 篇文章 1 订阅

订阅专栏

SharePoint 2013提供了JSLink这种非常方便的方式来自定义field的展示。例如一个自定义的field为ColorField, 有一个自定义的属性为Color，下面是一个最简单的在list view form种展示field的值的js代码：
首先在field的定义中重写JSLink属性：

public override string JSLink
{
    get 
    { 
        return "/_layouts/15/mysolutions/colorfield.js"; 
    }
}

然后在colorfield.js文件中，添加以下代码，就完成了最简单的field值的展示，代码中只是把ColorField的值展示在list view form中，没有任何其他的功能了。

(function () {
var colorFieldContext = {};
colorFieldContext.Templates = {};
colorFieldContext.Templates.Fields = {
    "MySolution.ColorField": {
        "View": function (ctx, field) {
            var fieldName = ctx.CurrentFieldSchema.RealFieldName;
            var fieldValue = ctx.CurrentItem[fieldName];
            return fieldValue;
        }
    }
};
  SPClientTemplates.TemplateManager.RegisterTemplateOverrides(cbfContext);
})();

现在需要做的是根据自定义的Color属性的值，为ColorField的值添加不同的样式，这里需要用到一个trick，首先在重写JSLink的地方，添加查询字符串，把自定义的field的name和Color属性的值放到查询字符串中，这样我们在客户端就可以读取到当前的field的Color属性了：

public override string JSLink
{
    get 
    { 
        return stirng.Format("/_layouts/15/mysolutions/colorfield.js?fieldname={0}&color={1}", this.InternalName, this.Color); 
    }
}

然后在colorfield.js文件中添加下面代码，把field的Color属性使用数组保存起来（因为一个list中可能有多个ColorField）。

var ColorFieldsConfigs = [];  //保存list中所有ColorField的配置
var allScripts = document.scripts || document.getElementsByTagName('script');
var scriptAmount = allScripts.length;
for (i = 0, i < scriptAmount; i++)
{
    var script = allScripts[i];
    if (script .src && (script .src.indexOf('/colorfield.js?') != -1))
    {
        var query = script .src.split('?')[1];
        var args = query.split('&');
        var config = {};
        var fieldName = null;
        for (var j in args)
        {
            var arg = args[j].split('=');
            if (arg[0] == 'fieldname')
                fieldName = arg[1];
            else
                config[arg[0]] = arg[1];
        }
        if (fieldName)
            ColorFieldsConfigs[fieldName] = config;
    }
}

取到了Color属性的配置信息，就可以根据field的Color属性的值来展示不同的样式了，所以colorfield.js的完整代码为：

var ColorFieldsConfigs = [];  //保存list中所有ColorField的配置
var allScripts = document.scripts || document.getElementsByTagName('script');
for (i = 0, l = allScripts.length; i < l; i++)
{
    var script = allScripts[i];
    if (script .src && (script .src.indexOf('/colorfield.js?') != -1))
    {
        var query = script .src.split('?')[1];
        var args = query.split('&');
        var config = {};
        var fieldName = null;
        for (var j in args)
        {
            var arg = args[j].split('=');
            if (arg[0] == 'fieldname')
                fieldName = arg[1];
            else
                config[arg[0]] = arg[1];
        }
        if (fieldName)
            ColorFieldsConfigs[fieldName] = config;
    }
}

 (function () {
    var colorFieldContext = {};
    colorFieldContext.Templates = {};
    colorFieldContext.Templates.Fields = {
        "MySolution.ColorField": {
            "View": function (ctx, field) {
                var fieldName = ctx.CurrentFieldSchema.RealFieldName;
                var fieldValue = ctx.CurrentItem[fieldName];
                var color = ColorFieldsConfigs[fieldName];
                if (color == "Red")
                {
                    fieldValue = "<div class='RedColor'>" + fieldValue + "</div>";
                }
                else if (color == "Green")
                {
                    fieldValue = "<div class='GreenColor'>" + fieldValue + "</div>";
                }
                return fieldValue;
            }
        }
    };
      SPClientTemplates.TemplateManager.RegisterTemplateOverrides(cbfContext);
    })();