sharepoint列表默认的3个表单（NewForm、DispForm、EditForm）都千篇一律的一种风格，我们其实可以用前端JS来修改以快速达到想要的效果。
先来看看默认的表单效果
JS修改中我们要用到JQ，所以你要先去下载，然后就是JS代码如下：
1 2 3 4 5 6 7 8 9 10 11 12 | $(document).ready(function() { $(".hillbillyForm").each(function() { displayName = $(this).attr("data-displayName"); elem = $(this); $("table.ms-formtable td").each(function(){ if (this.innerHTML.indexOf('FieldName="'+displayName+'"') != -1){ $(this).contents().appendTo(elem); } }); }); }); |
现在就是界面部份的Html，每一个栏都要以下代替
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 41 42 43 | <div class="main-content"> <div class="content-wrap"> <div class="row"> <div class="col-md-12"> <table id="ybForm" class="form form-horizontal" bordercolor="buttontext" border="1"> <thead> <tr class="clear"> <td class="w90"> </td> <td class="w130"> </td> <td class="w90"> </td> <td class="w130"> </td> <td class="w90"> </td> <td class="w130"> </td> <td class="w90"> </td> <td class="w130"> </td> </tr> </thead> <tbody valign="top"> <tr> <td colspan="8" class="tit"><h1>New Item</h1></td> </tr> <tr> <td class="tit">标题</td> <td colspan="3"><div class="form-group hillbillyForm" data-displayname="标题"></div></td> <td class="tit">test1</td> <td colspan="3"><div class="form-group hillbillyForm" data-displayname="test1"></div></td> </tr> <tr> <td class="tit">user</td> <td colspan="3"><span class="hillbillyForm" data-displayname="user"></span></td> <td class="tit">time</td> <td colspan="3"><span class="hillbillyForm" data-displayname="time"></span></td> </tr> <tr> <td class="tit">test2</td> <td colspan="7"><span class="hillbillyForm" data-displayname="test2"></span></td> </tr> </tbody> </table> </div> </div> </div> </div> |
data-displayname是我们的栏名，要显示的都给他加入自己定的Html中，最终全部全成如下（样式可以自己设计）：
保存到我们的sharepoint服务器上，进入我们的列表“新建项目”就打开了NewForm.aspx页面，点编辑网页
添加2个“内容编辑器”Web部件，在媒体和内容下面内容编辑器，内容链接分别设置js和html的URL，如下：
确定、保存，效果出来了，
DispForm和EditForm同样的做法，同样还可以用JS扩展，如默认值、表单验证、那些栏在某种条件下显示等等
