jQury datatables plugins 中文排序

Thu, 10 Jun 2010 06:31:47 +0800

 

本来想现在这个公司能让我学学服务器方面的东西.....看来是有些渺茫了...早说嘛...早说我就不来了，在原来那里还给我管两部开发服务器...经理肯教。不能怪别人，怪自己吧。

好！ 牢骚发完了..我来现在这个新公司弄javascript去了........javascript我也是没用过几次的...

但是....网站新功能模块的所有javascript都要我一个人完成...shit......

好。切入重点好了.

恩，我用到了一个很强大的jquery插件。 datatables 详情请点击进去看。

老外的东西...没有中文排序...今天经理要求表格要有中文排序。死啦！ 我以为要大动干戈...不过.因为这个插件对第三方开发支持比较灵活...得救了。

简单说一下。 datatables这个插件的排序默认提供按三种类型，string, number, 第三个忘记了.自己看吧。

于是，其他类型的排序就要自己定义了..应该说可以自己定义！！！

插件的string类型是按字符编码排序的，而我们所谓的中文排序是要按拼音排序的！！！！

google 了一下... javascript提供了这方面的功能。oh.yeah.....

下面这句代码应该好似俺本地化来做比较....中文环境就用拼音比较的意思... 返回 －1，1。(好像是....也忘记了。上网搜搜就有了...额...这是病。)

 

// oSort 是排序类型数组, 'chinese-asc' 是自己定义的类型的排序(*-asc || *-desc)名称.
// 插件应该会根据表格中的内容的类型(string, number, chinese :) )，
// 比如: chinese类型的用 oSort['chinese-asc'] 方法进行比较排序。所以下面定义类型的时候要和这里对上。
//用oSort对应的function 来进行比较排序.
// 所以，function 里是自定义的比较方法.
jQuery.fn.dataTableExt.oSort['chinese-asc']  = function(x,y) {
        //javascript 本身提供的本地化比较函数。
        return x.localeCompare(y);
    };

    jQuery.fn.dataTableExt.oSort['chinese-desc']  = function(x,y) {
        return y.localeCompare(x);
    };
    //aTypes 是插件存放表格内容类型的数组，可以根据自己需求添加，比如 curreny类型。
    // 下面用到的正则也是google来的，判断是否是中文字符.
    //返回 null 则默认表格内容是 'string' 类型。
    jQuery.fn.dataTableExt.aTypes.push(
        function(sData) {
            var reg =/^[\u4e00-\u9fa5]{0,}$/;
            if(reg.test(sData)){
                return 'chinese';
            }
            return null;
        }    
    );
/* 就说这么多吧...... */

 

Tags: javascript
Posted in 随笔 | 1834 Comments

iframe. 子父页面互相操作

Tue, 29 Dec 2009 05:32:44 +0800

简单记录一下今天学到的东西。 jQuery相关。

summay:

 将子页面的数据处理后传到父页面；

条件：

子页面(iframe)有一列表。

父页面有一待填入数据的table，与子页面具有对应元素。

需求：

双击子页面的列表某一行。在父页面的添加一行数据，数据来自子页面列表，供修改。子页面行高亮提示。

在父页面加减行里删除某行，去掉子页面列表对应行的高亮。

（具体怎么删除添加行就不说了，不是自己的东西）

使用工具:

JsonUtil. jQuery

简单示例:

子页面js部分

 

jQuery(document).ready(function() {
    //假设所有 tr 都在 tbody标签内操作如下
    jQuery('table tbody>tr').dblclick(function() {
	var o = new Object();
	var $thistr = jQuery(this);
	$thistr.find('td').each(function() {
		//获取自己定义的tag属性 <td tag="hello">td的内容</td>
		var name = jQuery(this).attr('tag');
		//获取本td内容
		var tdValue = jQuery(this).text();
		o[name] = tdValue;
	});
	if(searchItemFromParent(o['accountNo']))
	    return;
	parent.dataObj; //暂时用此比较恶心的做法，父页面全局变量
	parent.addRaw(null);
	$thistr.addClass('light'); //自定义light样式，这里不写出来里的。就随便一个颜色
    });
});

//搜索是否已经添加到父页面中
function searchItemFromParent(accountNo) {
    var itemExist = false;
    jQuery('tbody > tr',window.parent.document).find('input[name*=accountNo]').each(function() {
	if(jQuery(this).val() == accountNo) {
	    itemExist = true;
	    return; // work?
	}
    });

    return itemExist;
}
父页面：

<html>
<!-- iframe -->
<script type="text/javascript">
function addRaw(arg) {
    //.....
}

//添加行后触发的事件，传入该tr对象
var dataObj;
function addRawEvent(newtr) {
       //...........
       //对某table添加行
       jQuery(newtr).find('input').each(function() {
	    var nameList = jQuery(this).attr('name').split('.');
	    //以'.'为风格符，转成数组，获得最后一个元素
	    //处理jsp中的这中情况 name="a.b[0].accountNo" 
	    var name = nameList[nameList.length - 1];
	    jQuery(this).val(dataObj[name]);
       });
}

//....删除事件

function removeRowEvent(removetr) {
    jQuery('table tbody>tr',window.iframes['infoIframe'].document).find('td[tag*=accountNo]').each(function() {
	if(jQuery(removeTr).find('input[name*=accountNo]').val() == jQuery(this).text()) {
	    jQuery(this).removeClass('light');
	}
    });
}
</script>
<!-- iframe -->
<iframe id="infoIframe" src="child.html" />
</html>

 

 

Tags: javascript
Posted in 随笔 | 593 Comments