Sharepoint JSLink 修改列表样式

很多时候sharepoint默认的列表样式不能满足我们的需求,所以我们都要修改列表样式,以达到我们的要求。
如下是默认的列表:

 

 

我们的要求交易要显示正常或淘汰、加工工时侧显示状态灯

 

 

之前想要修改列表样式,是一件非常痛苦的事情,现在我们只需要加点JS代码就行,如下给列表添加JS链接:

 

 

确定后就可实现上面所效果(JS代码请看最下面),而且我们还可以点击状态灯以显示详细信息,如下

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
RegisterModuleInit("/_layouts/15/2052/styles/style/js/List.Supplier.js", RegisterRenderView);
RegisterRenderView();
function RegisterRenderView() {
    var overrideCtx = {};
    overrideCtx.Templates = {};
    overrideCtx.Templates.Fields = {
        'Trading': {
            'View': renderTrading
        },
        'PTview': {
            'View': renderPTview
        }
    };
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
}
function renderTrading(ctx) {
    var ret = "淘汰";
    if (ctx.CurrentItem.Trading == "是") {
        ret = "正常";
    }
    return ret;
}
function renderPTview(ctx) {
    var PTview = ctx.CurrentItem.PTview;
    if (PTview == '' || PTview == undefined || PTview == null) {
        PTview = 0;
    }
    var color;
    if (PTview <= 2) {
        color = "text-success";
    } else if (PTview <= 5) {
        color = "text-warning";
    } else {
        color = "text-danger";
    }
    var strOP = "/supplier/SupplierAdmin/ViewTime.aspx?id=" + ctx.CurrentItem.ID;
    strOP = "javascript:showSPDialog('" + strOP + "','" + ctx.CurrentItem.Title + "')";
    ret = "<a href=" + strOP + " title='点击查看'><i class='fa fa-circle mg-r-xs " + color + "'></i>" + PTview + "天</a>";
    return ret;
}

分享

文章导航

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*