easyui 导航菜单如何使用自定义图标

easyui 导航菜单如何使用自定义图标,第1张

自定义图标很简单,你可以打开easyui中的icon.css这个文件看看他的图标类是如何定义的就明白了,自己准备一个16×16的png小图标,然后在icon.css里面增加你自己定义的图标类就可以了。

我不太明白楼主所说的“动态”所指的是什么状态,一般来讲遇到过比较初级的人感觉“动态”一词仅是指可动的动画效果,这个的话还比较好说,但是如果楼主希望导航栏根据不同的访问者和访问条件变成不同的结构或内容,这个就不是js范畴好控制的了(当然也不是不行)

首先,是“可动的动画效果”,这个上来说easyUI并没有直接提同导航栏的控件或者样式,但是两种easyui提供的样式可以提供参考和辅助,一个是eaysui-menu类(参考Easyui官方帮助文档9页-创建简单菜单),另一个是panel面板(参考Easyui官方帮助文档15页-创建折叠面板)。具体要求可以追问

如果说动态的改变导航栏的结构和内容,那么多数请款下“动态”一次就不是指的js范畴了,这一般来讲是动态后台语言(如,asp,jsp,php等)的工作内容。当然js本身也可以达到类似的效果,但是只能是效仿。提供一个种简单的思路吧,有不明白可以追问。将所有可能的导航栏选项,都以静态形式上传到本地,然后在用户进行会改变导航栏的 *** 作的时候,由js从新生成页面内节点。当然如果需要刷新的页面的话,就在本地创建cookie,存储一些参数,然后再页面加载的过程中,根据cookie的参数,生成页面。

第一步,我需要 在datagrid行里添加一列,field指向id(field:'id'),然后对这列进行格式化处理(formater:格式化函数),如下:

<th data-options="field:'id',width:180,formatter: rowformater"> *** 作</th>

复制代码

第二步:

根据documentation的描述,formatter的格式化函数有3个parameters,分别是:

value: the field value,也就是field:'id'。

rowData: the row record data。就是这一行的Json数据,包括你已经选择在Datagrid上显示的内容,和没显示的内容。因为我的Json数据里包括了Id这一内容,所以我可以直接调用。如果你作为数据源的Json里没有Id属性,需要修改一下Json的输出。我的每行Json输出是类似{"id":"1","name":"\u7ecf\u6d4e\u53d1\u5c55","parentId":"0"}的结构

rowIndex: the row index.当前行的Index。

所以我写rowformater这个函数的时候,也需要用function rowformater(value,row,index)的方法。为了看起来清晰明白,我只在函数里写了一句话(放在<head>标签里),事实上项目上需要做一些基本的判断。:

<script type="text/javascript">

function rowformater(value,row,index)

{

return "<a href='"+row.id+"' target='_blank'> *** 作</a>"

}

</script>

复制代码

OK,应该能跑起来了。跑出的结果就是上面的截图样式。

注意:自己做了以后发现,如果UI中一行的多个列需要用到数据源中的同一列,那么可能会有问题,需要把这UI中的多个列并到同一列中,共同使用数据源中的这同一列。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11720245.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-18
下一篇 2023-05-18

发表评论

登录后才能评论

评论列表(0条)

保存