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

最新推荐文章于 2019-07-07 13:46:42 发布

attilax

最新推荐文章于 2019-07-07 13:46:42 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： gui界面

本文链接：https://blog.youkuaiyun.com/attilax/article/details/23885443

gui界面专栏收录该内容

56 篇文章

订阅专栏

本文详细介绍了如何使用EasyUI框架实现Radio图片选择器，并通过一系列优化措施提升用户体验。包括数据获取、分页展示、绑定到grid、图片样式设置以及事件处理等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

##原因...
--------------------
首先,寻找这个控件,但是没有..
只好自己实现,使用Listview..
但是多少framework都没lv,只好使用datagrid来的做..

##.keyword,subtitle关键字,子标题
-------------------------
js json 字符串的转换.
列表行转列方法..
grid 列格式化..
datagrid >>> listview

作者老哇的爪子 Attilax 艾龙， EMAIL:1466519819@qq.com
来源： http://blog.youkuaiyun.com/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);
}