很多时候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; } |