[原] 总算实现SWFUpload和easyui的DataGrid整合了
Posted by bianbian on 2011-12-24 11:25
本文Tags: easyui, jQuery, swfupload
不好意思，最近又忙又懒。拖了很久，总算差不多完成了：
遵守创作共用协议，转载请链接形式注明来自http://bianbian.org 做人要厚道
相关日志
Posted in JavaScript, Technology | No Comments »
便便代码人生
关注技术, 偶尔动动手
Archive for the 'JavaScript' Category
All about JavaScript, :)
遵守创作共用协议，转载请链接形式注明来自http://bianbian.org 做人要厚道
[原] 基本实现swfupload和easyui的结合
Posted by bianbian on 2011-08-05 04:36
不得不说，前台全用js来做还是很累的。上图一张（半成品）：
遵守创作共用协议，转载请链接形式注明来自http://bianbian.org 做人要厚道
相关日志
Posted in JavaScript | No Comments »
[原] 建了一个google code项目：jquery myhint plugin
Posted by bianbian on 2011-01-16 12:24
本文Tags: google, jQuery, plugin
在这里：http://code.google.com/p/jquery-myhint-plugin/
easy to use myhint plugin:
- <script src="jquery.myhint.min.js" type="text/javascript"></script>
- <link href="jquery.myhint.css" type="text/css" rel="Stylesheet" />
- ...
- <tag class="_hint" hint="text">...</tag>
- <tag class="_hint" hint="(left,top)text">...</tag>
- <tag class="_hint" hint="#tipid">...</tag><div id="tipid">text</div>
- <tag class="_hint" hint="(left,top)#tipid">...</tag><div id="tipid">text</div>
效果：
遵守创作共用协议，转载请链接形式注明来自http://bianbian.org 做人要厚道
相关日志
Posted in JavaScript, Technology | No Comments »
[原] 一种将数据表DataTable转为JSON格式的新方法
Posted by bianbian on 2010-09-23 03:17
最近实现一种将数据表转为JSON表示的新方法。
这种方法表示的JSON数据更省空间（尤其是网络传输，能省很多数据量），使用起来也很方便。
假设有这样一张数据表：
| ID | Name | Location |
| 1 | 周杰伦 | 香港 |
| 2 | 侯佩岑 | 台湾 |
| 3 | 张靓颖 | 大陆 |
一般的JSON表示方法为：
- [
- {"ID":1, "Name": "周杰伦", "Location": "香港"},
- {"ID":2, "Name": "侯佩岑", "Location": "台湾"},
- {"ID":3, "Name": "张靓颖", "Location": "大陆"}
- ]
可以看到，数据表的字段信息(column)在每条记录里都写了一遍，比较浪费空间。如果字段很多很长，甚至会比有效内容更多。随着记录数增加，浪费的数据量是很可观的。尤其像以前小百合BBS自己付流量费的时候，流量啊流量。。。。。。
我实现的表示方法产生的JSON格式是这样的：
- {
- "C":{"ID":0, "Name":1, "Location":2},
- "D":[
- [1, "周杰伦", "香港"],
- [2, "侯佩岑", "台湾"],
- [3, "张靓颖", "大陆"]
- ]}
这种方法将字段信息单独提取到C属性里，而D属性是纯粹的记录数据。
其实D属性本身已经完全能表示记录内容，C属性只是为了使用时方便。
在这短短几个字段及几条数据的极端情况下，已经省下几十字节。
下面对比使用方法，我承认这种方法稍微比通用的方法复杂一点，但是带来的节省，个人认为还是值得的：
- 通用方法取周杰伦：[0].Name
- 我的方法取周杰伦：D[0][C.Name]
下面是上述DataTable转JSON的C#代码：
- using System;
- using System.Text;
- using System.Web.Script.Serialization;
- /// <summary>
- /// 一种JSON表示DataTable的新方法
- /// <see href="http://bianbian.org/technology/javascript/361.html" />
- /// </summary>
- public static class JsonUtil
- {
- static JavaScriptSerializer _jss = new JavaScriptSerializer();
- /// <summary>
- /// DataTable 转换成 JSON string。
- /// </summary>
- /// <param name="dt">需要转换的DataTable</param>
- /// <returns>JSON结构字符串</returns>
- public static string FromDataTable(System.Data.DataTable dt)
- {
- StringBuilder sb = new StringBuilder(256);
- FormDataTable(dt, sb);
- return sb.ToString();
- }
- /// <summary>
- /// DataTable 转换成 JSON string。
- /// </summary>
- /// <param name="dt">需要转换的DataTable</param>
- /// <param name="sb">StringBuilder</param>
- public static void FormDataTable(System.Data.DataTable dt, StringBuilder sb)
- {
- sb.Append("{C:{");
- // -> {"ID":0, "Name":1}
- for (int j = 0; j < dt.Columns.Count; j++)
- {
- if (j > 0)
- sb.Append(',');
- sb.Append('"').Append(dt.Columns[j].ColumnName).Append('"')
- .Append(':').Append(j);
- }
- sb.Append("},D:[");
- for (int i = 0; i < dt.Rows.Count; i++)
- {
- if (i > 0)
- sb.Append(',');
- sb.Append('[');
- for (int j = 0; j < dt.Columns.Count; j++)
- {
- if (j > 0)
- sb.Append(',');
- _jss.Serialize(dt.Rows[i][j], sb);
- }
- sb.Append(']');
- }
- sb.Append("]}");
- }
- }
遵守创作共用协议，转载请链接形式注明来自http://bianbian.org 做人要厚道
相关日志
Posted in C#, JavaScript, Technology | 11 Comments »
[原] jquery-easyui的combotree在.net开发中不显示数据的问题
Posted by bianbian on 2010-08-29 12:07
本文Tags: combotree, easyui, jQuery, post
最近使用jquery-easyui 1.2，遇到一个问题。
一搜索，发现好多人在问：
问题见：http://jquery-easyui.wikidot.com/forum/t-248817/combotree-net
“combotree在.net开发中，一直不显示数据。
单独html页面就可以显示出来。同一数据文件，json格式绝对正确。”
解决问题首先要发现原因，用firebug试了一下，发现是combotree读取json的时候是用POST方法。
而.net环境不支持静态文件用POST方法获取内容。错误如下：
POST app_user.js
http://localhost:9655/js/app_user.js
405 Method Not Allowed
发现原因后，解决问题就简单很多。
找到easyui的js代码：
_41.addClass(“tree-loading”);
$.ajax({type:”post”,url:_3e.url,data:_3c,dataType:”json”,success:function(_42){
_41.removeClass(“tree-loading”);
在我的应用中，因为不需要POST方式获取json，就把type:”post”改为type:”get”即可。
已在easyui的官方论坛中说明这个问题，希望以后能多个method的设置选项。
2010.12.18 更新：
新版本jquery-easyui 1.2.1提供了tree组件的method方法设置，但是在用css自动解析方式时无效。
即通过《input class=”easyui-combotree” url=”…js” method=”get” /》调用时，仍然使用POST。
查看代码，原来是这里parseOptions时未对method进行解析：
$.fn.tree.parseOptions=function(_13c){
var t=$(_13c);
return {url:t.attr(“url”),…
加上对method的解析：
return {url:t.attr(“url”),method:(t.attr(“method”)?t.attr(“method”):”post”),…
问题解决。
标签: combotree, easyui, jQuery, post遵守创作共用协议，转载请链接形式注明来自http://bianbian.org 做人要厚道
相关日志
Posted in JavaScript, Technology | 2 Comments »
[原] 基于jQuery的自动TAB选项卡实现
Posted by bianbian on 2009-07-24 01:03
jQuery挺好用，我就不说啥了。
今天实现了“自动TAB”，下面分享一下。有人会问为啥不用jquery-ui，主要是页面css已经全弄好了，实在不想为ui再写一次；其次是ui毕竟是那么大个家伙，心疼我的性能。
HTML页面非常简单：
- <div class="tabBox">
- <!--选项卡菜单-->
- <ul class="tabMenu">
- <li class="on"><a>选项卡1</a></li>
- <li><a>选项卡2</a></li>
- </ul>
- <!-- 选项卡内容-->
- <div class="hide">
- 选项卡1内容
- </div>
- <div class="hide">
- 选项卡2内容
- </div>
- </div>
之后就是用jQuery自动对这个.tabBox进行处理，加上鼠标点击自动切换的功能（当然可以加上鼠标移过的选项支持，作为示例，我就没写那么完善）：
- $(function () {
- //===== TAB自动切换 tabBox =====
- // <div class="tabBox">
- // <ul class="tabMenu"><li class="on"><a>选项卡1</a></li></ul>
- // <div class="hide">内容1</div>
- // </div>
- // (1) li增加"index"记录偏移量（第i项），给a增加click方法
- $('.tabBox .tabMenu li').each(function(i, li) {
- li = $(li);
- li.attr('index', i)
- .children('a').attr('href', 'javascript:;').click(function() {
- //点击项的li的class设为on
- var li_on = $(this).parent(),
- index = li_on.attr('index');
- li_on.parent().children().removeClass('on');
- li_on.addClass('on');
- //显示对应的div内容。注意get(index)返回的是DOM节点，因此需要再$()转为jQuery对象
- $(
- li_on.parent().parent().children('div').addClass('hide').get(index)
- ).removeClass('hide');
- });
- //显示现有的li class=on对应的div内容
- if (li.hasClass('on')) {
- li.children('a').click();
- }
- });
- });
遵守创作共用协议，转载请链接形式注明来自http://bianbian.org 做人要厚道
相关日志
Posted in JavaScript, Technology | No Comments »
[原] 给LilyBBS新增源代码语法高亮功能
Posted by bianbian on 2008-05-06 09:12
使用方法：
[code]
代码
[/code]
目前支持：C/C++、Java、Python、Bash、SQL、HTML、XML、CSS、Javascript、Makefile、Ruby、PHP、Awk、Perl
效果示例：
Read the rest of this entry »
遵守创作共用协议，转载请链接形式注明来自http://bianbian.org 做人要厚道
相关日志
Posted in JavaScript, Technology | 2 Comments »
[原] 关于正则表达式批量替换字符串解决方案答网友问
Posted by bianbian on 2008-04-20 03:43
本文Tags: JavaScript, 正则表达式, 解决
发信人: Net (BBS上没有什么事情是bg不能解决的), 信区: WebDesign
标 题: Re: 如何使用正则分别替换？
发信站: 南京大学小百合站 (Sun Apr 20 15:21:23 2008)
不太可能一句话搞定，不过有相对而言的解决办法：
1) 简单易懂
- function arrayReplace(str, from, to) {
- for(var i=0; i < from.length; i++)
- str = str.replace(new RegExp(from[i], "g"), to[i]);
- return str;
- }
- var from = ["A", "B", "C"], to = ["asdf", "fdsa", "......"];
- str = arrayReplace(str, from, to);
2) 勉强算一句话吧。。。
- str = str.replace(/(A|B|C)/g, function ($0, $1) {
- return {"A": "asdf", "B": "fdsa", "C": "......"}[$1]
- });
【 在 superphoenix (格云朱雀) 的大作中提到: 】
: 比如要将一个字符串中的A替换为asdf，B替换成fdsa，C替换成……
: 能不能用一个正则话就替换成功？
: 而不是写成str=str.replace(/A/g,”asdf”).replace(/B/g,”fdsa”)….
: 谢谢！
※ 来源:．南京大学小百合站 bbs.nju.edu.cn．[FROM: Net.nEt.neT.Orz]
标签: JavaScript, 正则表达式, 解决遵守创作共用协议，转载请链接形式注明来自http://bianbian.org 做人要厚道
相关日志
Posted in JavaScript, Technology | No Comments »
[原] 关于web访问小百合BBS的脚本问题
Posted by bianbian on 2008-04-07 01:28
本文Tags: BBS, Firefox, IE, JavaScript, 脚本
最近发现个别网友访问小百合BBS会出现如下提示：
见到此文字可能是由于浏览器禁用了活动脚本或者脚本有误
请启用脚本支持后刷新本页；若仍有问题，请点击这里提问
原理：使用Javascript动态输出框架结构（好处是能缓存静态化网页，区别guest用户和登录用户）。因此，一旦这步出现错误，框架结构未建立成功，那么就会显示body里的提示内容。
原因：
（1）浏览器版本不支持。目前小百合BBS支持IE5.5（不保证全部功能有效），完美支持IE6+、Firefox 2.0+、Opera 9+等。如果您的浏览器不在此列，并且测试正常，欢迎反馈。
（2）浏览器脚本引擎未启用。您可以点击这里测试：如果能弹出“脚本启用”，那说明这项没有问题；否则，请修改设置如下：
Firefox:
IE:
（3）脚本有误。可能性不是很大，除非刚好碰到更新的脚本确实存在错误。基本上我都会测试以后才放上去。不过万一你怀疑是这个问题，可以telnet方式到sysop版看看，如果其他人都没问题那基本就只是您的问题了。
（4）浏览器缓存内的脚本版本过旧。因为浏览器缓存脚本文件（这样不需要每次都下载，加快速度），如果服务器端已经更新了脚本文件，而您的浏览器缓存因为各种原因没有更新，可能也会导致这个问题。请清空浏览器缓存后刷新测试：
Firefox:
IE:
（5）校内用户访问BBS请关闭代理服务器。
（6）浏览器或系统部分DLL（动态链接库）功能因为病毒或木马的原因失效（Windows系统），请点此下载修复程序，保存后运行，然后重新打开浏览器测试。
如果还有问题，请留言将您的操作系统、浏览器（基本是IE出问题）及版本、杀毒软件等告知。另外推荐使用Firefox:
标签: BBS, Firefox, IE, JavaScript, 脚本遵守创作共用协议，转载请链接形式注明来自http://bianbian.org 做人要厚道
相关日志
Posted in JavaScript, Technology | 37 Comments »
[译] JavaScript (XMLHttpRequest) 读取二进制数据流
Posted by bianbian on 2008-04-06 01:36
本文Tags: AJAX, Firefox, JavaScript, XMLHttpRequest, 二进制, 数据
译者注：原来想用JS直接处理C丢过来的struct数据，具体可以查看：[原] C的struct和JSON交互。
经过千辛万苦的查找，找到了这篇文章（作者应该比我更辛苦）：Downloading Binary Streams with Javascript XMLHttpRequest
把关键点翻译如下（不过我还没有测试）：
利用XMLHttpRequest的overrideMimeType方法设置charset为x-user-defined。
- //fetches BINARY FILES synchronously using XMLHttpRequest
- load_url = function(url) {
- netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
- var req = new XMLHttpRequest();
- req.open('GET',url,false);
- //XHR binary charset opt by Marcus Granado 2006 [http://mgran.blogspot.com]
- req.overrideMimeType('text/plain; charset=x-user-defined');
- req.send(null);
- if (req.status != 200) return '';
- return req.responseText;
- }
- var filestream = load_url(url);
- var abyte = filestream.charCodeAt(x) & 0xff;
IE不支持overrideMimeType方法，不过有评论者说VBScript可以实现：
- Dim xhr
- Set xhr = CreateObject("Microsoft.XMLHTTP")
- xhr.Open "GET", "folder.bin", False
- xhr.setRequestHeader "Accept-Charset", "x-user-defined"
- xhr.setRequestHeader "Content-Type", "application/pdf"
- xhr.send Null
遵守创作共用协议，转载请链接形式注明来自http://bianbian.org 做人要厚道
相关日志
Posted in JavaScript, Technology | 3 Comments »
[原] 支持IE和Firefox的鼠标滚轮事件JavaScript代码
Posted by bianbian on 2008-03-31 10:09
本文Tags: Firefox, IE, Mouse, Wheel, 滚轮, 鼠标
滚轮IE和Firefox的代码不一样：
IE是mousewheel事件，Firefox是DOMMouseScroll事件
事件属性，IE是event.wheelDelta，Firefox是event.detail
属性的方向值也不一样，IE向上滚 > 0，Firefox向下滚 > 0
- //滚轮放大或缩小，基于Prototype 1.6
- var scrollfunc = function(event) {
- var direct = 0;
- if (event.wheelDelta) {
- direct = event.wheelDelta > 0 ? 1 : -1;
- } else if (event.detail) {
- direct = event.detail < 0 ? 1 : -1;
- }
- zoom(direct);
- };
- Event.observe(document, 'mousewheel', scrollfunc);
- Event.observe(document, 'DOMMouseScroll', scrollfunc); //firefox
遵守创作共用协议，转载请链接形式注明来自http://bianbian.org 做人要厚道
相关日志
Posted in JavaScript, Technology | 7 Comments »
[原] 模仿Google Map的FY2C实时云图平台上线~
Posted by bianbian on 2008-03-25 10:03
模仿Google Map（图片切片载入在此平台不需要实现）：
支持IE、Firefox等，支持鼠标移动、鼠标双击放大（左键）缩小（右键）、鼠标滚轮放大缩小
云图实时处理和发布（因为在学校内网，实时版本大家不能看到啦）
这里贴下演示地址（只有最后两个时次的图片）：FY2C实时云图平台演示
标签: FY2C, 云图遵守创作共用协议，转载请链接形式注明来自http://bianbian.org 做人要厚道
相关日志
Posted in C/C++, JavaScript, Meteorology, Technology | No Comments »
[原] 关于Javascript的this关键字答网友问
Posted by bianbian on 2008-03-25 01:57
本文Tags: JavaScript, prototype, this
发信人: Net (BBS上没有什么事情是bg不能解决的), 信区: WebDesign
标 题: Re: Javascript问题
发信站: 南京大学小百合站 (Tue Mar 25 01:16:03 2008)
Javascript里的this和其他OO语言不一样
Javascript其实并不适合做OO，其实OO也并不适合Javascript
扯远了。。。。。。
this你就当“执行函数的宿主”理解。因此在一串函数的执行过程中，this不停地在变。
- A = {
- member: "OK",
- method: function () {
- alert(this.member);
- }
- };
- B = A.method;
- A.method(); //弹出"OK". A是宿主，this.member == A.member
- B(); //弹出undefined. window（缺省）是宿主，this.member == window.member
为了解决这个问题，很多框架对此进行了包装。
比如Prototype，用bind，实际是动态生成一个function，把宿主作为动态function的执行者，这样对用户来说，this似乎没有变化。
- bind: function() {
- if (arguments.length < 2 && Object.isUndefined(arguments[0])) return this;
- var __method = this, args = $A(arguments), object = args.shift();
- return function() {
- return __method.apply(object, args.concat($A(arguments)));
- }
- }
实际只要明白this是执行者的指针，一切都可迎刃而解。
标签: JavaScript, prototype, this遵守创作共用协议，转载请链接形式注明来自http://bianbian.org 做人要厚道
相关日志
Posted in JavaScript, Technology | No Comments »
[原] IE模拟鼠标右键双击事件
Posted by bianbian on 2008-03-25 01:10
本文Tags: dblclick, IE, prototype, 右键
IE实在太垃圾了，再鄙视一次。。。鼠标右键双击居然没有。。。。
只好用onmouseup事件模拟一个（基于Prototype 1.6）：
- if (Prototype.Browser.IE) {
- mouseCount = 0;
- Event.observe(document, 'mouseup', function(event) {
- if (Event.isRightClick(event)) {
- if (++mouseCount > 1) {
- mouseCount = 0;
- var pxy = Event.pointer(event);
- alert("right mouse double click on: " + pxy.x + ", " + pxy.y);
- } else {
- setTimeout("mouseCount = 0", 1000);
- }
- }
- });
- }
遵守创作共用协议，转载请链接形式注明来自http://bianbian.org 做人要厚道
相关日志
Posted in JavaScript, Technology | 1 Comment »
[原] 也许是prototype框架的bug
Posted by bianbian on 2008-03-08 08:03
本文Tags: bug, framework, JavaScript, prototype, 框架
不知道怎么给prototype提交bug report，就写在这里吧：
其实我没有测试过，只是看prototype源码的时候，觉得是个bug：
对String的原型（prototype）添加toJSON()函数只是转义了引号，未转义”\”：
- if (useDoubleQuotes) return '"' + escapedString.replace(/"/g, '\\"') + '"';
- return "'" + escapedString.replace(/'/g, '\\\'') + "'";
如果用户在input里输入\\，转成string应该是”\\\\”，如果没有转义，再写回去的时候就丢了一个\
应该在转义引号前先转义\：
- .replace(/\\/g, '\\\\').replace(/"/g, '\\"')
遵守创作共用协议，转载请链接形式注明来自http://bianbian.org 做人要厚道
相关日志
Posted in JavaScript, Technology | No Comments »