zoukankan      html  css  js  c++  java
  • datagrid动态数据添加超链接的方法

    首先,我我们要有一个json格式的datagrid_data.json文件,如下:

    其次,在body下有个数据表格,引入json

    <table class="easyui-datagrid" style="400px;height:250px" data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">
        <thead>   
            <tr>    
            <th data-options="field:'code',100">Code</th>         
            <th data-options="field:'name',100,formatter:planUrl">Name</th>        
            <th data-options="field:'price',100,align:'center'">Price</th>
            <th data-options="field:'test',100">Test</th>     
            </tr>       
        </thead>
    </table>

    然后,在脚本script中,写超链接的方法(跳转的路径,想做的事情)

    <link rel="stylesheet" type="text/css" href="../../js/jquery-easyui-1.4.3/themes/metro/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../js/jquery-easyui-1.4.3/themes/icon.css">
    <script type="text/javascript" src="../../js/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="../../js/jquery-easyui-1.4.3/jquery.min.js"></script>
    <script type="text/javascript" src="../../js/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>

    <script>

        //value:绑定列的所有值,row:整个datagrid的所有行,index:绑定列的下标
        function planUrl(value,row,index){    
               if(value){
               return "<a href=http://www.baidu.com?code="+row.code +">"+value+"</a>";
             }
          }
    </script>

    最后,显示的效果是这样的

  • 相关阅读:
    Class加载顺序
    Java中9大内置基本数据类型Class实例和数组的Class实例(转载)
    java配置日志总结
    Java格式化CST时间(mysql date类型)
    对称二叉树
    模拟--滑动窗口最大值
    group by两个条件
    P1996 约瑟夫问题
    C++命名空间、标准库(std,全局命名空间)
    java中引用对比C++指针
  • 原文地址:https://www.cnblogs.com/xielong/p/5344306.html
Copyright © 2011-2022 走看看