paip.提升用户体验--radio图片选择器 easyui 实现..

#paip.提升用户体验--radio图片选择器 easyui 实现..

===================================

##原因...

--------------------

首先,寻找这个控件,但是没有..

只好自己实现,使用Listview..

但是多少framework都没lv,只好使用datagrid来的做..

##.keyword,subtitle关键字,子标题

-------------------------

js json 字符串的转换.

列表 行转列 方法..

grid 列格式化..

datagrid >>> listview

作者 老哇的爪子 Attilax 艾龙， EMAIL:1466519819@qq.com

来源： http://blog.csdn.net/attilax
##pseudo code伪码 处理流程

--------------------------

首先,捕获all json obj list

分页,5

line>> column..

绑定到个grid..(column 定义格式化到图片src)

设置图片边框,2px,normal:dot,color:gray ,,,选择的:slot,color:red

设置mouse over,out event

获得值,,,一个是呈交的时候儿从slectpics pics 根据class..这个麻烦的..

一个是clieck的时候儿不个值放得个input里面,这个easy..

##actual code 实际代码如下

----------------

###捕获all json obj list

function getAjaxData()

{

var urlo4="data/defIcons.json";

$.ajax({

url:urlo4,

dataType:"json",

success:function(data){

// $("#resText").html(date);

// alert(data);

// alert(data[0]);

// var obj = eval(data);

var obj=data;

logx("src::"+data[0].src);

var data2=Line2Col(data);

logx("line2col after:"+data2);

//return;

// var dataObjFmt=eval(data2);

addDataToGrid(data2);



}

});

###

function Line2Col(data)

{

var arrayObj = new Array();

logx("dataarr.length:"+data.length);

var arr = eval(data);

//arr=data;

logx("<arr.length:"+arr.length);

for(var i=0;i<arr.length;i++){

var obj=arr[i];

var s=obj.id+","+obj.src;



arrayObj.push(s);

if(i>=4)

break;

}

// arrayObj.push("testxxx");

logx("arrayObjLeng:"+arrayObj.length);

var s_r="";

for(j=0;j<arrayObj.length;j++)

{

var s=arrayObj[j];

var tmp=' "item@index": "@str"';

tmp=tmp.replace("@index",j+1).replace("@str",s);

s_r+=tmp+",";



}

s_r=s_r.substr(0,s_r.length-1);

logx("s_r::"+s_r);

s_r="[{"+s_r+"}]";

return eval(s_r);





}

###bind to grid

function addDataToGrid(data)

{$('#dg').datagrid({

data: data,

showHeader: false

});

}

<table id="dg" class="easyui-datagrid" data-options="singleSelect:false" style="height:121px" >

<thead>

<tr>





<th data-options="field:'item1' ,width:100,formatter:formatItem" >item1</th>

<th data-options="field:'item2' ,width:100,formatter:formatItem" >部门名称</th>

<th data-options="field:'item3' ,width:100,formatter:formatItem" >部门名称</th>

<th data-options="field:'item4' ,width:100,formatter:formatItem" >部门名称</th>

<th data-options="field:'item5' ,width:100,formatter:formatItem" >item5</th>



</tr>

</thead>



</table>



function formatItem(val,row)

{

var itemval=val;

try{

var a=val.split(",");

var id=a[0];

var src=a[1];

}catch(e){}

return '<div ><img id="icon_divO4_'+id+'" class="img_def" onmouseover="over_event(this.id)" onmouseout="mouseout_event(this.id)" src="'+src+'" onclick="selectIcon('+id+')" /></div>';



}

###set mouseout_event mouseover event

<style type="text/css">



.img_def {



border: 2px dotted #CCC;

}

.over {

border: 2px solid #F30;

}

.img_over {



border: 2px solid #F30;

}

</style>

function mouseout_event(id)

{

$("#"+id).attr("class","img_def");

}

function over_event(id)

{

$("#"+id).attr("class","img_over");

}

### set click event

function selectIcon(id)

{

//alert(id);

logx("slctIconId:"+id);

$("#selctIconId").attr("value",id);

}