sharepoint 列表默认表单修改之JS

sharepoint列表默认的3个表单(NewForm、DispForm、EditForm)都千篇一律的一种风格,我们其实可以用前端JS来修改以快速达到想要的效果。
先来看看默认的表单效果
1
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">&nbsp;</td>
              <td class="w130">&nbsp;</td>
              <td class="w90">&nbsp;</td>
              <td class="w130">&nbsp;</td>
              <td class="w90">&nbsp;</td>
              <td class="w130">&nbsp;</td>
              <td class="w90">&nbsp;</td>
              <td class="w130">&nbsp;</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中,最终全部全成如下(样式可以自己设计):
2
保存到我们的sharepoint服务器上,进入我们的列表“新建项目”就打开了NewForm.aspx页面,点编辑网页
添加2个“内容编辑器”Web部件,在媒体和内容下面内容编辑器,内容链接分别设置js和html的URL,如下:
3
确定、保存,效果出来了,
4
DispForm和EditForm同样的做法,同样还可以用JS扩展,如默认值、表单验证、那些栏在某种条件下显示等等
5

分享

文章导航