SharePoint 2013 通过JavaScript实现列表标题列宽度可拖动

简介: 前言   最近有个新需求,用户希望标题栏可以拖动宽度,其实觉得没什么用,既然用户要了又推不掉,就勉为其难实现一下吧。   其实原理比较简单,就是利用JavaScript对标题栏进行宽度控制,然后从网上搜了一下,碰巧看到有人写好的方法,秉承拿来主义的精神,就借用了一下,详细脚本参考附录。

前言

  最近有个新需求,用户希望标题栏可以拖动宽度,其实觉得没什么用,既然用户要了又推不掉,就勉为其难实现一下吧。

  其实原理比较简单,就是利用JavaScript对标题栏进行宽度控制,然后从网上搜了一下,碰巧看到有人写好的方法,秉承拿来主义的精神,就借用了一下,详细脚本参考附录。

  1、默认的SharePoint列表是下面的样子,每一列的内容都是自适应的,很紧凑,其实也还好;

clip_image002

  2、拖动以后的样子是下面的,其实感觉也没什么用,很鸡肋,想想用户后续肯定会提,把当前状态保存下来的需求;

  虽然自己这次没有把这个需求做好,但是心里有底了,依旧利用JavaScript把各个列的宽度,保存到cookie里就行了;当然有人说禁用了cookie的问题,那就想办法存到url或者服务器端控件吧;还好我们统一的IE策略,不会禁用cookie的。

clip_image004

  3、其实具体步骤非常简单,就是把附录的脚本文件传到文档库,引用一下,然后在这个视图中初始化一下这个表格就可以了;

clip_image006

  4、然后在页面上的引用,也非常简单,如下图:

clip_image008

  5、其实,SharePoint和JavaScript的结合可以做很多事儿,最近也用EasyUI在SharePoint做一些尝试,结合SharePoint本身的特性,感觉还是不错的。

EasyUI在SharePoint的简单示例

  就像之前做的一个例子,感觉虽然不是特别完美,但是也间接实现了用户的需求。用户希望这个Filter可以进行搜索,因为可能会有太多选项。

clip_image010

  所以把这个功能拿出来,专门做成一个搜索框了,利用EasyUI自带的功能,把控件初始化以后,可以有搜索功能;

  效果如下图:

clip_image012

总结

  当然,可能做得功能比较简单,想表达的意思是JavaScript本身在SharePoint中应用越来越广泛,希望大家可以多多使用,多多实践,多多分享。遇到一些比较奇葩的需求,想起我们还有JavaScript这一前端武器。

  特别要说的,这些东西不仅仅适用于本地的SharePoint开发和实施,同样适用于世纪互联和国际版的SharePoint Online。

附录

  http://www.cnblogs.com/mlcactus/p/4118714.html

目录
相关文章
|
JavaScript
Vue3 + Js 指定位置进行拖动
Vue3 + Js 指定位置进行拖动
481 0
|
前端开发
用html+javascript打造公文一键排版系统3:获取参数设置、公文标题排版
用html+javascript打造公文一键排版系统3:获取参数设置、公文标题排版
|
JavaScript 前端开发
JS配合CSS3实现动画和拖动小星星小Demo
本文通过代码示例展示了如何使用JavaScript和CSS3实现动画效果和拖动小星星的交互效果,包括文字掉落动画和鼠标拖动产生小星星动画的实现方法。
425 1
JS配合CSS3实现动画和拖动小星星小Demo
|
JavaScript
js学习--商品列表商品详情
js学习--商品列表商品详情
338 2
|
JavaScript 前端开发 索引
JavaScript HTML DOM 节点列表
JavaScript HTML DOM 节点列表
258 5
|
JavaScript 前端开发
【原创】用JavaScript动态获取网页中缩放图片的长度、宽度和显示比例
【原创】用JavaScript动态获取网页中缩放图片的长度、宽度和显示比例
|
JavaScript 前端开发
使用js生成表格标题、表格内容并且每行附带删除按钮然后插入到页面中
使用js生成表格标题、表格内容并且每行附带删除按钮然后插入到页面中
330 2
|
JavaScript 索引
Vue.js的`v-for`用于基于数组或对象渲染列表,如遍历数组生成`<li>`元素
【6月更文挑战第25天】Vue.js的`v-for`用于基于数组或对象渲染列表,如遍历数组生成`<li>`元素。基本语法是`v-for="(item, index) in items"`,支持遍历对象的键值对。注意与`v-if`同用时应使用`<template>`,组件上使用`v-for`需设`key`属性以优化性能。
423 2
|
JavaScript 前端开发
【专栏】`Function.prototype.apply` 在JavaScript中用于动态设定函数上下文(`this`)和参数列表
【4月更文挑战第29天】`Function.prototype.apply` 在JavaScript中用于动态设定函数上下文(`this`)和参数列表。它接受两个参数:上下文对象和参数数组。理解`apply`有助于深入JS运行机制。文章分三部分探讨其原理:基本概念和用法、工作原理详解、实际应用与注意事项。在应用中要注意性能、参数类型和兼容性问题。`apply`可用于动态改变上下文、传递参数数组,甚至模拟其他语言的调用方式。通过深入理解`apply`,能提升代码质量和效率。
329 3