新豪天地网上娱乐开户


新豪天地网上娱乐开户今早看到一个新闻,一名男子当街被面包车撞倒后逃逸,注意是男子逃逸,不是面包车逃逸,面包车主反而被吓到了,赶快报警。后来警察找到他后,问他为什么跑,他说,我女朋友还等着我买冰镇西瓜回去呢!据我所知,能干出这事的人,除了他也就只有我了。新豪天地网上娱乐开户在这种团体的社会实践中,最容易产生喜悦和感动的情绪,比如,当自己在所属的组别里努力完成自己的工作,从而促进了别的组的工作,当受到其他组成员的感谢时,那种喜悦感和感动便从此燃起。
新豪天地网上娱乐开户我便能说出我们别离的日期
新豪天地网上娱乐开户 有一类人他就是一只哈巴狗主人在时摇摇尾巴晃晃脑用舌头去舔主人的鞋底儿他也干
新豪天地网上娱乐开户妈妈,我今天中午不吃饭了。我知道我考的这点儿分没脸吃饭。
新豪天地网上娱乐开户由县城的大街小巷到城郊,由城郊到县城的大街小巷,刘财觉得自己像个外星人。机械地躲避车辆,答非所问地回应熟人打招呼,走进死胡同再迷迷瞪瞪地退回来,不知道是蝉叫还是耳鸣,揉几穗小麦扔进麦田,他自己不是自己,别人更不是自己,他是人是物,对他来说,都是麻木的。
新豪天地网上娱乐开户一刹那,突然感觉到大海其实充满了热情与能量。在海边,即使你不主动与她亲近,她也会热情地与你亲近。她会锲而不舍地追随你的脚步,她会永不停歇地朝你脚下奔涌。一不留神,她就漫过了你的鞋子,弄湿了你的裤脚,引来你的阵阵尖叫和欢笑。她就是这么的亲切可人!她永远会不知疲倦和厌烦地无条件的欢迎你、接纳你、拥戴你!在这里你可以体会到一种当明星被万众瞩目的感觉。当一排排海浪(粉丝)朝你涌过来,而你就是她的天、她的地、她的神话。她会心甘情愿的臣服在你的脚下,多多少少你都会有些感动吧!
新豪天地网上娱乐开户董里脸色通红,激动不已:杀一个够本,杀两个赚了,我他妈的不怕死。新豪天地网上娱乐开户而且,现在的情况似乎亦由不得他了解。新豪天地网上娱乐开户刚才体检时遇到件蛮有趣的事。  在称体重时,旁边站了一个小胖子。  原本他已经站到称上面去了,  突然他叫道“等下!”  只见他从口袋里拿出一小把硬币,  然后才心满意足地回到称上面去。  汗,我说你就别再做无用的挣扎了。

皇冠足球比分

大发论坛时时彩平台尊龙娱乐是黑网吗海天国际娱乐城注册送钱凯发娱乐亚美国际娱乐城 金龙国际 www.am8.com 亚洲城娱乐 老k国际娱乐城 666k8.com 金威国际娱乐城 名人国际娱乐城 ag娱乐平台 V博娱乐城 金钱豹娱乐开户CC新球网的注单号是怎么生成的鸿博足球开户网上可以兑换的棋牌游戏网上洗码官网时时彩平台哪个好【注册送钱e8889.com】百嘉乐名爵国际娱乐城返水华克山庄官网真钱龙虎官网www.hwx88.comag平台牛牛皇冠国际网上投注

easyui-datagrid 编辑模式详解

   一,建立编辑器

 

       从api得知,扩展一种新的编辑器类型,需要提供以上几个方法。项目中正好需要一个checkbox 类型编辑器,但在easyui中并没提供这样的编辑器,那我们可以通过扩展编辑器来解决,扩展如下

 

 1  .extend(.fn.datagrid.defaults.editors, {
 2     checkbox: {//调用名称
 3         init: function (container, options) {
 4            //container 用于装载编辑器 options,提供编辑器初始参数
 5             var input = ('<input type="checkbox" class="datagrid-editable-input">').appendTo(container);
 6            //这里我把一个 checkbox类型的输入控件添加到容器container中
 7            // 需要渲染成easyu提供的控件,需要时用传入options,我这里如果需要一个combobox,就可以 这样调用 input.combobox(options);
 8             return input;
 9         },
10         getValue: function (target) {
11            //datagrid 结束编辑模式,通过该方法返回编辑最终值
12            //这里如果用户勾选中checkbox返回1否则返回0
13             return (target).prop("checked") ? 1 : 0;
14         },
15         setValue: function (target, value) {
16            //datagrid 进入编辑器模式,通过该方法为编辑赋值
17             //我传入value 为0或者1,若用户传入1则勾选编辑器
18             if (value)
19                 (target).prop("checked", "checked")
20         },
21         resize: function (target, width) {
22            //列宽改变后调整编辑器宽度
23             var input = (target);
24             if (.boxModel == true) {
25                 input.width(width - (input.outerWidth() - input.width()));
26             } else {
27                 input.width(width);
28             }
29         }
30     }
31 });

 新的编辑扩展好以后,跟系统默认的编辑器使用方式一样:

 

二 , 获取编辑器

 

datagrid 通过调用 beginEdit 传入要开始编辑行的对应的索引,该行进入编辑模式。通过 endEdit 或者 cancleEdit结束编辑模式,endEdit会提交一个数据变更记录,cancleEdit会还原为初始数据。

getEditors以及getEditor 返回指定行当前编辑器,getEditor 底层调用getEditors 方法。getEditors 返回一个编辑器对象数组。

三,编辑器事件

   一个项目中存在这样三个需求

    1,根据不同的操作结果,渲染不同编辑控件的操作模式,如以下图所示,用户选择小组1,日期控制范围必须到天,右侧日期控件提供按天选择展示。用户选择小组6,日期控制范围到月就可以了,右侧日期控件提供按月选择展示。

    2,列表中存在开始日期,和结束日期必须控制开始日期不能大于结束日期或者结束日期不能大于开始日期

    3,根据用户选择的开始日期,提取对应的年份。

 

 

针对这两个需求,该怎么实现呢?

   先来了解下datagrid在编辑模式提供哪些可用事件,以及如何扩展一个新数据验证规则

API中提供事件:

 

扩展数据验证规则:

 1 .extend(.fn.validatebox.defaults.rules, {
 2    //验证开始日期只能小于结束日期
 3     sdatecompare: {
 4         validator: function (value, param) {
 5             var end = param[0];
 6             if (typeof end == 'string') {
 7                 end = (param[0]);//结束日期 selector
 8             }
 9             if (!end.datebox("getValue")) {
10                 return true;
11             }
12             var endDate = new Date(end.datebox("getValue"));
13             var CurDate = new Date(value);
14             return CurDate < endDate;
15         },
16         message: '开始日期必须小于结束日期'
17     },
18     edatecompare: {
19         validator: function (value, param) {
20             var start = param[0];
21             if (typeof start == 'string') {
22                 start = (param[0]); //开始日期 selector
23             }
24             if (!start.datebox("getValue") || !value) {
25                 return true;
26             }
27             var startDate = new Date(start.datebox("getValue"));
28             var CurDate = new Date(value);
29             .fn.validatebox.defaults.rules.edatecompare.message = '结束日期必须大于开始日期';
30             return CurDate > startDate;
31         },
32         message: ''
33     },
34 });

 

     有了以上两点基本知识,这三个需求处理起来就很顺利了。第一个需求,根据不同的数据渲染不同的界面。在此我看到了 onBeforeEdit 根据字面意思就是在开始编辑之前,官方解释,用户在开始编辑一行数据时触发。也就是说,在这个事件激发之前,datagrid根本还没有建立或初始编辑器控件,而我们又知道datagrid 编辑是通过列属性中editor中options渲染控件的,那在这里改变options的值不就好了么,于是在onBeforeEdit我敲上了一下js代码:

1 var zSelected = fazgl.grdtnz.datagrid("getSelected");
2 var ksOpts = (this).datagrid("getColumnOption", "F_KSRQ");
3 var jsOpts = (this).datagrid("getColumnOption", "F_JSRQ");
4 var rendmodes = ["year", 'month'];//easyui calendar 中扩展一个mode属性,用于显示选择到月或者到天
5 .extend(ksOpts.editor.options, { mode: rendmodes[zSelected.F_SFFT] });
6 .extend(jsOpts.editor.options, { mode: rendmodes[zSelected.F_SFFT] });

 

     通过验证这个思路完全正确,合理处理了根据不同数据展现不同界面的需求。第一个需求到此结束,现在聚焦到第二个需求,开始日期必须小于结束日期,从上面扩展的数据验证规则sdatecompare和edatecompare,我们知道需要传入一个被比较日期控件的selector。那该怎么实现呢?在回看一下 API,其中有onBeginEdit 这么一个事件,通过查阅源码,了解到datagrid在激发该事件时已经对应的编辑控件已经创建完毕,那通过datagrid 提供方法 getEditors或者getEditor得到编辑器,其中的target不就是需要的selector么! 于是乎,我在onBeginEdit 中敲下了如下代码:

 1             var editors = (this).datagrid("getEditors", index);
 2             var ed_Ksrq = editors[0];//开始日期编辑器
 3             var ed_Jsrq = editors[1];//结束日期编辑器
 4             //easyui 日期控件从 textbox扩展,所有需要得到对应textbox的options才能加入验证规则
 5             var ksopts = (ed_Ksrq.target).datebox("textbox").validatebox("options");
 6             ksopts.validType = ksopts.validType || {};//如果编辑器最初设置,对应编辑器validType为null,这里做下为空判断
 7             .extend(ksopts.validType, { sdatecompare: [ed_Jsrq.target] });
 8             var jsopts = (ed_Jsrq.target).datebox("textbox").validatebox("options");
 9             jsopts.validType = jsopts.validType || {};
10             .extend(jsopts.validType, { edatecompare: [ed_Ksrq.target] });

 

      经过测试,思路完全正确,成功实现动态加入验证规则。有了以上经验,对于第三个需求,感觉已经没有什么难度了,datagrid提供 onEndEdit(销毁编辑器前) ,onAfterEdit(销毁编辑器后),都会返回 一个changes 对象,里边保存了变更的数据,于是我在onEndEdit 写下了如下代码:

 1  var nrow = {};
 2 
 3             //判断是否有更改开始日期
 4 
 5             if (changes["F_KSRQ"]) {
 6 
 7                 var kAry = changes.F_KSRQ.split("-");
 8 
 9                 var date = new Date(parseInt(kAry[0]), parseInt(kAry[1]) - 1);
10 
11                 nrow["F_NIAN"] = date.getFullYear();
12 
13                 nrow["F_KSY"] = kAry[1];
14 
15                 nrow.F_KSRQ = row.F_KSRQ + "-" + "01";
16 
17             }
18 
19           //更新数据
20 
21             (this).datagrid("updateRow", {
22 
23                 index: index,
24 
25                 row: nrow
26 
27             });
28 
29             nrow = null;

 

 这样就 onCancelEdit 这个事件没有讲解了,不过根据api也明白是在什么时候调用的,可以做哪些事,还等待合适的需求又来在讲解!

2015-11-24

posted @ 2015-11-24 18:11 _herbert 阅读(...) 评论(...) 编辑 收藏