ECMAScript对象模型+JavaScript分页控件PagerView做成了一个及时提交反馈信息的Webpart部件

ECMAScript对象模型读取列表数据代码来自：http://www.learningsharepoint.com/2011/09/04/get-listlistitems-using-ecmascriptjavascript-client-object-model-sharepoint-2010/

ECMAScript对象模型新增数据至列表代码来自：http://www.cnblogs.com/wsdj-ITtech/archive/2012/06/09/2426504.html（来自万事大吉博客）他写了关于ECMAScript对象模型的9篇文章，从1看到9应该有新增数据的代码列子

JS分页控件查询代码来自：http://js.alixixi.com/a/2011022667921.shtml

以上为我查询的资料的一些链接。

描述：ECMAScript对象模型添加数据至列表“Dictionary”，并读取数据，用JS分页控件分页。

我的全部前台代码：

View Code

  1 <style type="text/css">
  2     body
  3     {
  4         margin: 0;
  5         padding: 0;
  6         font-size: 14px;
  7         font-family: tahoma, arial;
  8         background: #fff;
  9     }
 10     .PagerView
 11     {
 12         color: #333;
 13         text-align: center;
 14         margin: 8px;
 15     }
 16     .PagerView span
 17     {
 18         color: #999;
 19         margin: 0 1px;
 20         padding: 3px 6px;
 21         border: 1px solid #ccc;
 22     }
 23     .PagerView span.on
 24     {
 25         color: #333;
 26         font-weight: bold;
 27         border: 1px solid #333;
 28     }
 29     .PagerView a
 30     {
 31         color: #00f;
 32         text-decoration: none;
 33     }
 34     .PagerView a span
 35     {
 36         border: 1px solid #66c;
 37         color: #33f;
 38     }
 39     .PagerView a:hover span
 40     {
 41         color: #f00;
 42         background: #ff9;
 43     }
 44 </style>
 45 <script type="text/javascript">
 46 <!--
 47     /**
 48     * 开源代码, 有兴趣的可以在保留声明的前提下免费使用.
 49     *********** 声明开始 ***********
 50     * @author ideawu@163.com
 51     * @link http://www.ideawu.net
 52     *********** 声明结束 ***********
 53     *
 54     * 分页控件, 使用原生的JavaScript代码编写. 重写onclick方法, 获取翻页事件,
 55     * 可用来向服务器端发起AJAX请求.
 56     *
 57     * 示例:
 58     * HTML:
 59     * <div id="pager"></div>
 60     *
 61     * JavaScript:
 62     * var pager = new PagerView('pager');
 63     * pager.index = 3; // 当前是第3页
 64     * pager.size = 16; // 每页显示16条记录
 65     * pager.itemCount = 100; // 一共有100条记录
 66     *
 67     * pager.onclick = function(index){
 68     * alert('click on page: ' + index);
 69     * // display data...
 70     * pager.render();
 71     * };
 72     *
 73     * pager.render();
 74     *
 75     * @param id: HTML节点的id属性值, 控件将显示在该节点中. 可以延迟到render方法调用之前设置.
 76     */
 77     function PagerView(id) {
 78         var self = this;
 79         this.id = id;
 80         this.container = null;
 81         this.index = 1; // 当前页码, 从1开始
 82         this.size = 15; // 每页显示记录数
 83         this.maxButtons = 9; // 显示的分页按钮数量
 84         this.itemCount = 0; // 记录总数
 85         this.pageCount = 0; // 总页数
 86         /**
 87         * 控件使用者重写本方法, 获取翻页事件, 可用来向服务器端发起AJAX请求.
 88         * @param index: 被点击的页码.
 89         */
 90         this.onclick = function (index) {
 91         };
 92         /**
 93         * 内部方法.
 94         */
 95         this._onclick = function (index) {
 96             self.index = index;
 97             self.onclick(index);
 98             self.render();
 99         };
100         /**
101         * 在显示之前计算各种页码变量的值.
102         */
103         this.calculate = function () {
104             self.pageCount = parseInt(Math.ceil(self.itemCount / self.size));
105             self.index = parseInt(self.index);
106             if (self.index > self.pageCount) {
107                 self.index = self.pageCount;
108             }
109         };
110         /**
111         * 渲染分页控件.
112         */
113         this.render = function () {
114             if (self.id != undefined) {
115                 var div = document.getElementById(self.id);
116                 div.view = self;
117                 self.container = div;
118             }
119             self.calculate();
120             var start, end;
121             start = Math.max(1, self.index - parseInt(self.maxButtons / 2));
122             end = Math.min(self.pageCount, start + self.maxButtons - 1);
123             start = Math.max(1, end - self.maxButtons + 1);
124             var str = "";
125             str += "<div class=\"PagerView\">\n";
126             if (self.pageCount > 1) {
127                 if (self.index != 1) {
128                     str += '<a href="javascript://1"><span>|<</span></a>';
129                     str += '<a href="javascript://' + (self.index - 1) + '"><span><<</span></a>';
130                 } else {
131                     str += '<span>|<</span>';
132                     str += '<span><<</span>';
133                 }
134             }
135             for (var i = start; i <= end; i++) {
136                 if (i == this.index) {
137                     str += '<span class="on">' + i + "</span>";
138                 } else {
139                     str += '<a href="javascript://' + i + '"><span>' + i + "</span></a>";
140                 }
141             }
142             if (self.pageCount > 1) {
143                 if (self.index != self.pageCount) {
144                     str += '<a href="javascript://' + (self.index + 1) + '"><span>>></span></a>';
145                     str += '<a href="javascript://' + self.pageCount + '"><span>>|</span></a>';
146                 } else {
147                     str += '<span>>></span>';
148                     str += '<span>>|</span>';
149                 }
150             }
151             str += ' 一共' + self.pageCount + '页, ' + self.itemCount + '条记录 ';
152             str += "</div><!-- /.pagerView -->\n";
153             self.container.innerHTML = str;
154             var a_list = self.container.getElementsByTagName('a');
155             for (var i = 0; i < a_list.length; i++) {
156                 a_list[i].onclick = function () {
157                     var index = this.getAttribute('href');
158                     if (index != undefined && index != '') {
159                         index = parseInt(index.replace('javascript://', ''));
160                         self._onclick(index)
161                     }
162                     return false;
163                 };
164             }
165         };
166     }
167 //-->
168 </script>
169 <table cellpadding="0" cellspacing="0" align="center" width="90%">
170     <tr>
171         <td style="font-size: 20px; font-family: @微软雅黑; font-weight: bold;">
172             <div id="commentTop">
173             </div>
174             <div id="info" style="text-align: center; width: 900px; margin: 0 20px; padding: 4px;
175                 border: 1px solid #999;">
176             </div>
177             <div id="pager" style="width: 900px; margin: 20px; padding: 4px; border: 1px solid #999;">
178             </div>
179         </td>
180     </tr>
181     <tr>
182         <td>
183             <div id="ContentShow">
184             </div>
185         </td>
186     </tr>
187     <tr>
188         <td height="25">
189         </td>
190     </tr>
191     <tr>
192         <td height="25" style="font-size: 20px; font-family: @微软雅黑; font-weight: bold;">
193             我要评论
194         </td>
195     </tr>
196     <tr>
197         <td>
198             <textarea id="txtContent" style="height: 91px; width: 738px"></textarea>
199         </td>
200     </tr>
201     <tr>
202         <td align="right">
203             <input value="提交反馈" type="button" id="btnsubmit" onclick="createListItem();" style="height: 27px;
204                 width: 102px" />&nbsp;
205         </td>
206     </tr>
207 </table>
208 <script type="text/javascript">
209 
210 
211     var contentValue = document.getElementById('txtContent').value;
212     var personTotal = 0;
213     //alert(contentValue);
214 
215     if (contentValue != '') {
216         ExecuteOrDelayUntilScriptLoaded(createListItem, "sp.js");
217     }
218     else {
219         ExecuteOrDelayUntilScriptLoaded(ShowData, "sp.js");
220     }
221     var clientContext = null;
222     var web = null;
223     var currentUser = null;
224     function createListItem() {
225 
226         clientContext = new SP.ClientContext.get_current();
227         web = clientContext.get_web();
228         currentUser = web.get_currentUser();
229         clientContext.load(currentUser);
230 
231         var oList = clientContext.get_web().get_lists().getByTitle("Dictionary");
232 
233         var itemCreateInfo = new SP.ListItemCreationInformation();
234         this.oListItem = oList.addItem(itemCreateInfo);
235 
236         oListItem.set_item('Title', window.location.toString().substring(54, 33));
237         oListItem.set_item('PublishingPageContent', document.getElementById('txtContent').value);
238         oListItem.set_item('Publisher', "  ");
239         oListItem.set_item('DCDateCreated', new Date().toLocaleString());
240         oListItem.set_item('DocumentID', '<%= DocumentID %>');
241 
242         oListItem.update();
243 
244         clientContext.load(oListItem);
245 
246         clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), 
247 
248 Function.createDelegate(this, this.onQueryFailed));
249     }
250     function onQueryFailed(sender, args) {
251 
252         alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
253     }
254 
255     function onQuerySucceeded() {
256 
257         var list = web.get_lists().getByTitle('Dictionary');
258         var product = list.getItemById(oListItem.get_id());
259         product.set_item('Publisher', currentUser.get_title());
260         product.update();
261         clientContext.executeQueryAsync(Function.createDelegate(this, this.updateProductsuccess), 
262 
263 Function.createDelegate
264 (this, this.updateProductfailed));
265 
266     }
267 
268     function updateProductsuccess() {
269         alert('添加成功');  //其实为修改成功
270         ContentShow.innerHTML = "";
271         document.getElementById('info').innerHTML ="";
272         ShowData();
273 
274         // window.location.href = window.location.href;
275     }
276     function updateProductfailed(sender, args) {
277         alert('failed. Message:' + args.get_message());
278     }
279 
280     function ShowData() {
281         var docid = '<%= DocumentID %>';
282         var context = new SP.ClientContext.get_current();
283         var web = context.get_web();
284         var list = web.get_lists().getByTitle('Dictionary');
285         //  var query = SP.CamlQuery.createAllItemsQuery();
286         var query = "<View><ViewFields><FieldRef Name='Title'/><FieldRef Name='PublishingPageContent'/><FieldRef Name='Publisher'/><FieldRef Name='DCDateCreated'/><FieldRef Name='DocumentID'/><FieldRef Name='Author'/><FieldRef 
287 
288 
289 Name='Created'/></ViewFields><Query><Where><Eq><FieldRef Name='DocumentID'/><Value Type='Text'>" + docid + 
290 
291 "</Value></Eq></Where><OrderBy><FieldRef Name='Created' Ascending='False' /></OrderBy></Query></View>";
292         var camlQuery = new SP.CamlQuery();
293         camlQuery.set_viewXml(query);
294         allItems = list.getItems(camlQuery);
295         context.load(allItems, 'Include(Title,PublishingPageContent,Publisher,DCDateCreated)');
296         context.executeQueryAsync(Function.createDelegate(this, this.success), Function.createDelegate(this, 
297 
298 this.failed));
299     }
300 
301     function success() {
302     
303         
304         var page=0;
305     var pageShowContent="";
306         var TextFiled = "";
307         var ListEnumerator = this.allItems.getEnumerator();
308         var count = allItems.get_count();
309 
310         
311  commentTop.innerHTML = "<table cellpadding=\"0\" cellspacing=\"0\"><tr><td align=\"left\" width=600>用户评论
312 
313 </td><td align=right width=120 style=\"font-size:12px;\">已有<font style='color:red'>" + count + "</font>人进行了评
314 
315 论</td></tr></table>";
316       
317         
318         var publisherArray=new Array();
319     var createdArray=new Array();
320     var contentArry=new Array();
321 
322         
323         while (ListEnumerator.moveNext()) {
324           
325             var currentItem = ListEnumerator.get_current();
326        
327               publisherArray[page]=  currentItem.get_item('Publisher');
328                  
329           createdArray[page]= currentItem.get_item('DCDateCreated') ;
330            
331           contentArry[page]=currentItem.get_item('PublishingPageContent') ;
332         
333             page++;
334         
335         }
336 
337     var pager = new PagerView('pager');
338         pager.itemCount = count ;
339         pager.size = 5;
340         pager.index = 1;
341         for(var s=0;s<publisherArray.length;s++)
342         {
343         if(s==pager.size)
344         {
345            break;
346         }
347          else
348         {
349 
350         document.getElementById('info').innerHTML +="<table cellpadding=\"0\" cellspacing=\"0\" width=\"100%\"><tr><td>反馈
351 
352         人:</td><td>" + publisherArray[s] + "</td><td>反馈时间:</td><td>" + createdArray[s]+ "</td></tr><tr><td colspan=4>反
353 
354         馈内容:</td></tr><tr><td colspan=4>" + contentArry[s]+ "</td></tr><tr><td colspan=4 heigth=5> 
355 
356         &nbsp;</td></tr></table>";
357         }
358   
359 }
360         pager.onclick = function (index) {
361         index=index-1;
362      
363         document.getElementById('info').innerHTML ="";
364         for(var j=(index*pager.size+1)-1;j<=((index+1)*pager.size)-1;j++)
365          {
366               if(j==Number(publisherArray.length))
367                  break;
368         document.getElementById('info').innerHTML +="<table cellpadding=\"0\" cellspacing=\"0\" width=
369 
370 \"100%\"><tr><td>反馈人:</td><td>" + publisherArray[j] + "</td><td>反馈时间:</td><td>" + createdArray[j]+ 
371 
372 "</td></tr><tr><td colspan=4>反馈内容:</td></tr><tr><td colspan=4>" + contentArry[j]+ "</td></tr><tr><td colspan=4 
373 
374 heigth=5> &nbsp;</td></tr></table>";
375          }
376  
377         };
378         pager.render();
379     }
380 
381     function failed(sender, args) {
382         alert("failed. Message:" + args.get_message());
383     }
384 
385 </script>

详细描述：

View Code

 1  function createListItem() {
 2 
 3         clientContext = new SP.ClientContext.get_current();
 4         web = clientContext.get_web();
 5         currentUser = web.get_currentUser();
 6         clientContext.load(currentUser);
 7 
 8         var oList = clientContext.get_web().get_lists().getByTitle("Dictionary");
 9 
10         var itemCreateInfo = new SP.ListItemCreationInformation();
11         this.oListItem = oList.addItem(itemCreateInfo);
12 
13         oListItem.set_item('Title', window.location.toString().substring(54, 33));
14         oListItem.set_item('PublishingPageContent', document.getElementById('txtContent').value);
15         oListItem.set_item('Publisher', "  ");
16         oListItem.set_item('DCDateCreated', new Date().toLocaleString());
17         oListItem.set_item('DocumentID', '<%= DocumentID %>');
18 
19         oListItem.update();
20 
21         clientContext.load(oListItem);
22 
23         clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), 
24 
25 Function.createDelegate(this, this.onQueryFailed));
26     }
27     function onQueryFailed(sender, args) {
28 
29         alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
30     }
31 
32     function onQuerySucceeded() {
33 
34         var list = web.get_lists().getByTitle('Dictionary');
35         var product = list.getItemById(oListItem.get_id());
36         product.set_item('Publisher', currentUser.get_title());
37         product.update();
38         clientContext.executeQueryAsync(Function.createDelegate(this, this.updateProductsuccess), 
39 
40 Function.createDelegate
41 (this, this.updateProductfailed));
42 
43     }
44 
45     function updateProductsuccess() {
46         alert('添加成功');  //其实为修改成功
47         ContentShow.innerHTML = "";
48         document.getElementById('info').innerHTML ="";
49         ShowData();
50 
51         // window.location.href = window.location.href;
52     }
53     function updateProductfailed(sender, args) {
54         alert('failed. Message:' + args.get_message());
55     }

以上代码为把反馈信息加入Dictionary列表的方法，其中<%= DocumentID %> 为我文章的唯一标识文档ID,我需要把相对应的反馈信息挂到相对应的文章上面。其中 Publisher为发布者，发布者为到当前用户，当我取当前用户时遇到了点困难，最后查资料说，没有添加成功之前好像不能添加当前用户（具体忘了），我只好先把空信息添加进发布者（ oListItem.set_item('Publisher', " ");），然后当我信息添加成功时，我再根据刚刚添加的信息ID做了一次修改，把空信息修改为当前用户（此时能取到当前用户）,即如下代码：

  function onQuerySucceeded() {

        var list = web.get_lists().getByTitle('Dictionary');
        var product = list.getItemById(oListItem.get_id());
        product.set_item('Publisher', currentUser.get_title());
        product.update();
        clientContext.executeQueryAsync(Function.createDelegate(this,    this.updateProductsuccess), 

Function.createDelegate
(this, this.updateProductfailed));

    }

当我添加成功之后，我需要即使显示反馈信息数据。由于需要分页，我又找到了上面的分页控件，然后把我所得到的反馈信息数据绑定到分页控件上，ECMAScript循环所有数据所用方法为 while (ListEnumerator.moveNext())，我不知道怎么绑定数据到分页控件，只好建了3个数组，分别存放我需要的数据（发布者、创建时间、反馈内容）。

效果如图：

上面还有一部分是显示我的文章信息的图没截全。

效果是做出来了，其中遇到问题我想到了方法就做下去，也没再想其他方法，感觉就这么一路做下去似的，没有想过其他更好的方法，事后也没有再想说要修改哪里，没有程序员的那种专研精神，也不是很负责任。

大家提点意见觉得哪一部分可以优化的，或者说还有什么更好的思路的。

求思路，求意见。

posted @ 2012-06-13 23:48 人往高处走阅读(200) 评论(0) 收藏举报

刷新页面返回顶部

ECMAScript对象模型+JavaScript分页控件PagerView做成了一个及时提交反馈信息的Webpart部件

公告