easyUI DataGrid View（数据表格展示）表格添加按钮

最新推荐文章于 2024-04-08 08:50:19 发布

paduck

最新推荐文章于 2024-04-08 08:50:19 发布

阅读量2.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： easyUI 文章标签： datagrid easyui 数据

本文链接：https://blog.youkuaiyun.com/paduck/article/details/77969996

easyUI 专栏收录该内容

1 篇文章

订阅专栏

本文展示了如何使用easyUI的DataGrid组件创建一个数据表格，并添加编辑按钮。通过设置`remoteSort`, `singleSelect`, `nowrap`等属性定制表格行为。表格列包括标识编号、文件名以及操作列，操作列使用`formatter`函数添加编辑链接。此外，还配置了工具栏以实现新增和帮助功能，并在数据加载成功后进行特定操作。" 132772244,19694646,Python文件句柄的进制读取教程,"['Python', '文件操作', '二进制处理']

  $('#tt').datagrid({
      fit:true,
      remoteSort : false,
      singleSelect : true,
      nowrap : false,
      fitColumns : true,
      url : '${pageContext.request.contextPath}/ringplay/ringplayall',
      columns : [ [ {
       field : 'ringplayId',
       title : '标识编号',
       align:'center',
       width : 80
      },{
       field : 'ringplayname',
       title : '文件名',
       align:'center',
       width : 80
      },{
       field : '操作',
       title : '操作',
       align:'center',
       width : 80,
       formatter:add
      }] ],

      view : detailview,
      detailFormatter : function(rowIndex, rowData) {
       return '<table><tr>'
         + '<td rowspan=2 style="border:0"><img src="img/' + rowData.imagesrc + '" style="height:50px;"></td>'
         + '<td style="border:0">'
         + '<p>图片描述: ' + rowData.imagedescribe + '</p>'
         + '<p>图片状态: ' + rowData.imagestate + '</p>'
         + '</td>' + '</tr></table>';
      },

      toolbar : [ {
        text:"新增轮播图",
        iconCls : 'icon-flag_cn',
        handler : function() {
         $("#dia").dialog({
          width:450,
          height:250,
          title:"新增轮播图",
          iconCls:"icon-add",
          href:"${pageContext.request.contextPath}/add.jsp",
         });
        }
       }, '-', {
        text:"帮助",
        iconCls : 'icon-help',
        handler : function() {

        }
       } ]
     });
  $('#tt').datagrid({
   onLoadSuccess:function(){
    $("a[class='easyui-linkbutton']").linkbutton({
        //具体操作
   });
  }
  });
  function add(value,row,index){
   return "<a class='easyui-linkbutton'>编辑</a>";
  }
</script>

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

onLoadSuccess data 在数据加载成功的时候触发。
formatter:单元格formatter(格式化器)函数，带3个参数：
value：字段值。
row：行记录数据。
index: 行索引。