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' ,100,formatter:formatItem"  >item1</th>
     <th data-options="field:'item2' ,100,formatter:formatItem"  >部门名称</th>
       <th data-options="field:'item3' ,100,formatter:formatItem"  >部门名称</th>
         <th data-options="field:'item4' ,100,formatter:formatItem"  >部门名称</th>
           <th data-options="field:'item5' ,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);
}