easyui_easyui radiobutton - CSDN
精华内容
参与话题
  • 关于easy UI的一些常用组件

    千次阅读 2018-06-21 09:36:36
    使用easyui的时候,一般使用的都是一些网格,和分页以及一些增删改查操作, easyui 的用法一般有两种,一种是用js写,一种是在标签里面加上class 废话也不多说,直接上代码,看一个小demo创建datagrid在页面上添加...

    使用easyui的时候,一般使用的都是一些网格,和分页以及一些增删改查操作,

        easyui 的用法一般有两种,一种是用js写,一种是在标签里面加上class

        废话也不多说,直接上代码,看一个小demo

    创建datagrid

    在页面上添加一个div或table标签,然后用jquery获取这个标签,并初始化一个datagrid。代码如下:

    页面上的div标签:

    1
    2
    <div id="magazineGrid">
    </div>

    js代码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    $('#magazineGrid').datagrid({
      height: 340,
      url: 'url',
      method: 'POST',
      queryParams: { 'id': id },
      idField: '产品ID',
      striped: true,
      fitColumns: true,
      singleSelect: false,
      rownumbers: true,
      pagination: false,
      nowrap: false,
      pageSize: 10,
      pageList: [10, 20, 50, 100, 150, 200],
      showFooter: true,
      columns: [[
        { field: 'ck', checkbox: true },
        { field: '刊名', title: '刊名', width: 180, align: 'left' },
        { field: '类别', title: '类别', width: 150, align: 'left' },
        { field: '月份', title: '月份', width: 100, align: 'left' },
        { field: '期次', title: '期次', width: 100, align: 'left' },
        { field: '价格', title: '价格', width: 100, align: 'right' },
        { field: '订阅数', title: '订阅数', width: 100, align: 'right' },
        { field: '库存数', title: '库存数', width: 100, align: 'right' },
        { field: '邮寄方式', title: '邮寄方式', width: 80, align: 'left' },
        { field: '数量', title: '数量', width: 80, align: 'left',
          editor: {
            type: 'numberbox',
            options: {
              min: 0,
              precision: 0
            }
          }
        }
      ]],
      onBeforeLoad: function (param) {
      },
      onLoadSuccess: function (data) {
         
      },
      onLoadError: function () {
         
      },
      onClickCell: function (rowIndex, field, value) {
         
      }
    });

    ajax请求返回的数据格式

    datagrid在创建完成后会根据url请求数据,这是通过ajax来完成的。服务器在完成请求处理后应返回带有rows属性的数据,如果用到分页,还需要有total属性:

    1
    var rst = new { total = iTotalCount, rows = entityList };

    说到ajax请求,难免需要在请求的时候传入一些查询条件,我通常是在onBeforeLoad事件中添加查询条件的:

    1
    2
    3
    4
    5
    6
    onBeforeLoad: function (param) {
      var bId = $("#txtBId").val();
      var AllSearchKey = $("#txtAllSearchKey").val();
      param.bId = bId;
      param.AllSearchKey = AllSearchKey;
    }
    分页处理

    如果要启用分页,在datagrid配置中,首先要加入如下配置:

    1
    pagination: true,

    这样一来我们的datagrid底部就会出现一个分页工具栏。

    这个时侯,datagrid在请求数据的时候会自动的添加分页的信息:

    • page:当前请求的页码
    • rows:每页要显示的行数

    在服务器端获取到这两个参数值,然后通过获取数据库中的总数据行数来完成数据处理。

    关于checkbox列

    上面的js代码创建的datagrid本身已经添加了checkbox列,就是第一列。checkbox列将会自适应宽度。

    1
    { field: 'ck', checkbox: true },

     关于rownumber列

    rownumber列的配置是在全局设置的,如果设置为true则会添加一列来显示行号。

    1
    rownumbers: true

    行编辑功能的实现

    datagrid本身提供了行编辑的功能。只需要两个步骤:

    1.设置列的editor属性

    2.手动触发编辑

    第一步,我们需要在column配置中指明editor,editor有两个属性,type和options,有效的type字符串有:

    text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree

    options则对应这些控件的具体配置,包括事件等。

    1
    2
    3
    4
    5
    6
    7
    editor: {
      type: 'numberbox',
      options: {
        min: 0,
        precision: 0
      }
    }

    如果不需要特殊的options配置,直接将type字符串赋给editor即可。

    1
    editor:'text'

    第二步,我们需要监听datagrid的onRowClick事件,或者onCellClick事件,我更愿意监听onCellClick事件,可以根据点击不同的字段来进入编辑模式,并设置单元格编辑控件的focus。

    1
    2
    3
    onClickCell: function (rowIndex, field, value) {
      beginEditing(rowIndex, field, value)
    }

    这里调用了beginEditing方法:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    var editIndex = undefined;
    var beginEditing = function (rowIndex, field, value) {
      if (field != "数量")
        return;
     
      if (rowIndex != editIndex) {
        if (endEditing()) {
          $('#magazineGrid').datagrid('beginEdit', rowIndex);
          editIndex = rowIndex;
     
          var ed = $('#magazineGrid').datagrid('getEditor', { index: rowIndex, field: '数量' });
          $(ed.target).focus().bind('blur', function () {
            endEditing();
          });
        } else {
          $('#magazineGrid').datagrid('selectRow', editIndex);
        }
      }
    }
    var endEditing = function () {
      if (editIndex == undefined) { return true }
      if ($('#magazineGrid').datagrid('validateRow', editIndex)) {
        var ed = $('#magazineGrid').datagrid('getEditor', { index: editIndex, field: '数量' });
        var number = $(ed.target).numberbox('getValue');
        $('#magazineGrid').datagrid('getRows')[editIndex]['数量'] = number;
        $('#magazineGrid').datagrid('endEdit', editIndex);
        $('#magazineGrid').datagrid('selectRow', editIndex);
        editIndex = undefined;
        return true;
      } else {
        return false;
      }
    }

    列格式化输出 formatter

    在列的配种中设置formatter

    1
    2
    3
    4
    5
    6
    7
    formatter: function (value, row, index) {
      if (row.user) {
        return row.user.name;
      } else {
        return value;
      }
    }

     使用工具栏

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    toolbar: [{
      text: 'Add',
      iconCls: 'icon-add',
      handler: function () { alert('add') }
    }, {
      text: 'Cut',
      iconCls: 'icon-cut',
      handler: function () { alert('cut') }
    }, '-', {
      text: 'Save',
      iconCls: 'icon-save',
      handler: function () { alert('save') }
    }],

     使用CardView效果

    cardView效果是这样的:

    cardView的代码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    var cardview = $.extend({}, $.fn.datagrid.defaults.view, {
      renderRow: function (target, fields, frozen, rowIndex, rowData) {
        var cc = [];
        cc.push('<td colspan=' + fields.length + ' style="padding:10px 5px;border:0;">');
        if (!frozen) {
          var aa = rowData.itemid.split('-');
          var img = 'shirt' + aa[1] + '.gif';
          cc.push('<img src="images/' + img + '" style="width:150px;float:left">');
          cc.push('<div style="float:left;margin-left:20px;">');
          for (var i = 0; i < fields.length; i++) {
            var copts = $(target).datagrid('getColumnOption', fields[i]);
            cc.push('<p><span class="c-label">' + copts.title + ':</span> ' + rowData[fields[i]] + '</p>');
          }
          cc.push('</div>');
        }
        cc.push('</td>');
        return cc.join('');
      }
    });
    $(function () {
      $('#tt').datagrid({
        view: cardview
      });
    });

    cardView其实是使用了datagrid的view配置,重写了其默认的renderRow方法。基于这种实现,我们可以显示更多样式的view。

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。


    展开全文
  • Easy UI常用的UI框架

    2020-07-30 23:32:04
    Easy UI常用的UI框架 拥有它让你的开发速度提高N倍!!内含easy ui教程等
  • easy UI简单使用介绍

    千次阅读 2016-08-30 13:37:52
    http://www.cnblogs.com/yokoboy/archive/2012/12/06/2806132.html
    http://www.cnblogs.com/yokoboy/archive/2012/12/06/2806132.html
    展开全文
  • Easy-ui的使用

    2019-07-05 17:39:08
    link引入时,应该先引入jquery的js 再引入easy-ui的js

    link引入时,应该先引入jquery的js
    再引入easy-ui的js

    展开全文
  • 应用非常广泛的基于html5和jquery的WEB页面前端框架,最新版1.7.5。可以在上面叠加css样式风格
  • Easy UI快速搭建一个后台

    万次阅读 2018-12-08 14:56:45
    今天来分享一个我前端技术-------如何使用Easy UI快速搭建一个后台,本博主也只是在官网文档学习了一个小时左右,就已经会使用了,当你学了Easy UI后,一个后台短短两分钟就可以over了,好了,别的不多说了,直接...

    今天来分享一个我前端技术-------如何使用Easy UI快速搭建一个后台,本博主也只是在官网文档学习了一个小时左右,就已经会使用了,当你学了Easy UI后,一个后台短短两分钟就可以over了,好了,别的不多说了,直接开始表演了;

    下面这张图是效果图:

    这是我搭建一个SSM(Spring Spring MVC Mybatis)框架体系时候用easy ui快速搭建的一个后台,一个简单的crud,做完后后台管理可以做成这样,今天我只给一个模板,各位大表哥可以自行复制粘贴,自行修改我不足的地方,以下将给出代码自行粘贴:

    <body class="easyui-layout">

    <div region="north" style="height: 78px; background-color: #E0ECFF"> </div>

    <div region="west" style="width: 200px" title="导航菜单" split="true"> </div>

    <div data-options="region:'center'" style="background:#eee;"> </div>

    <div region="south" style="height: 25px;padding: 5px" align="center"> </div>

    </body>

    此为页面的一个整体布局,从效果图我们可以看出来整个界面分为四个部分分别是 上下左右四个部分 现在我们已经通过easyui实现了这个效果,此时你已经可以看到真题布局的效果了:

    看起来似乎还行,接下来我们往东西南北四个大模块"加屎加尿",让他变的有模有样,

    <div class="easyui-accordion" data-options="fit:true,border:false">
                <div title="常用操作" data-options="selected:true,iconCls:'icon-item'" style="padding: 10px">
                    <a href="#" class="easyui-linkbutton"
                       data-options="plain:true,iconCls:'icon-writeblog'" style="width: 150px">新增</a>
                </div>
                <div title="管理" data-options="iconCls:'icon-bkgl'" style="padding:10px;">
                    <a href="#" class="easyui-linkbutton"
                       data-options="plain:true,iconCls:'icon-writeblog'" style="width: 150px;">写博客</a>
                    <a href="#" class="easyui-linkbutton"
                       data-options="plain:true,iconCls:'icon-bkgl'" style="width: 150px;">信息管理</a>
                </div>
                <div title="类别管理" data-options="iconCls:'icon-bklb'" style="padding:10px">
                    <a href="#" class="easyui-linkbutton"
                       data-options="plain:true,iconCls:'icon-bklb'" style="width: 150px;">类别信息管理</a>
                </div>
                <div title="评论管理" data-options="iconCls:'icon-plgl'" style="padding:10px">
                    <a href="#" class="easyui-linkbutton"
                       data-options="plain:true,iconCls:'icon-review'" style="width: 150px">评论审核</a>
                    <a href="#" class="easyui-linkbutton"
                       data-options="plain:true,iconCls:'icon-plgl'" style="width: 150px;">评论信息管理</a>
                </div>
                <div title="个人信息管理" data-options="iconCls:'icon-personal'" style="padding:10px">
                    <a href="#" class="easyui-linkbutton"
                       data-options="plain:true,iconCls:'icon-personal'" style="width: 150px;">修改个人信息</a>
                </div>
                <div title="系统管理" data-options="iconCls:'icon-system'" style="padding:10px">
                    <a href="#" class="easyui-linkbutton"
                       data-options="plain:true,iconCls:'icon-link'" style="width: 150px">友情链接管理</a>
                    <a href="#" class="easyui-linkbutton"
                       data-options="plain:true,iconCls:'icon-modifyPassword'" style="width: 150px;">修改密码</a>
                    <a href="#" class="easyui-linkbutton"
                       data-options="plain:true,iconCls:'icon-refresh'" style="width: 150px;">刷新系统缓存</a>
                    <a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-exit'"
                       style="width: 150px;">安全退出</a>
                </div>
            </div>

    把此段代码往west里面加,此时你将发现左边的导航栏已然出现:

    到了这里咱不急,慢慢来,接下来用选项卡做个首页:

    <div class="easyui-tabs" fit="true" border="false" id="tabs">

    <div title="首页" data-options="iconCls:'icon-home'">

    <div align="center" style="padding-top: 100px"><font color="red" size="10">欢迎使用</font></div>

    </div>

    </div>

     

    此段代码加入center:

    此时的后台依然变成这样了,接下来在north块加入:

    <table style="padding: 5px" width="100%">

    <tr>

    <td width="50%"> <h2>Easy UI搭建后台</h2> </td>

    <td valign="bottom" align="right" width="50%"> <font size="3"> <strong>欢迎:</strong>admin</font> </td>

    </tr>

    </table>

    再往 south加入:

    <div region="south" style="height: 25px;padding: 5px" align="center">
                    Copyright <strong>一回首一辈子</strong> 的博客 版权所有

    </div>

    之后基本一个后台该有的都有了,剩下的就是自行修改了,还有在做的各位会发现很多图标都没有出来,这些图标需要大家自定义,如需做成跟我一样的效果图,还需往前往官网jeasy.com学习选项卡,布局,数据表格,文本框,日期时间框,表单,分页等等。。。。。

    此处我只提供一个简单后台,可以让正在奋斗后台的你比别人早点睡,少熬几个小时夜,次篇博客无须多想,导入三个CSS文件,再导入一个jQuery的库文件跟一个easy ui的js文件,其他拿起就是copy,pasty

    展开全文
  • easy-ui

    2018-05-27 14:00:58
    使用jquery的easyui前,要引用 &lt;link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.3/themes/default/easyui.css"&gt;...jquery-easyui-1.3
  • Easy-ui常见用法总结

    千次阅读 2017-10-22 20:19:44
    消息提示框: 1. .messager.alert(‘提示信息′,‘新增项目成功′,‘info′);2..messager.alert(‘提示信息’, ‘新增项目成功’, ‘info’); 2. .messager.alert(‘提示信息’, ‘新增项目失败’, ‘warning’);...
  • JQuery Easy UI 框架 简单 布局
  • 使用Jquery Easy UI要导入的js顺序

    千次阅读 2014-07-30 15:42:16
    使用Jquery Easy UI要导入的js顺序 .引用Jquery的Js文件 .引用Easy UI的Js文件 .导入Easy UI的主题Css文件 .导入Easy UI的图标Css文件 .引用Easy UI的国际化文件 以下为让它显示中文 .页面上加上...
  • 我是asp.net新手,想学一种脚本框架,选来选去,准备从jquery的【Liger UI】和【Easy ui】某一种开始,但是比较来比较去还是拿不定主意,请用过的或高手给指点一下: 1、【Liger UI】和【Easy ui】都是免费的吗?...
  • easy Ui + Jquery 弹窗 的实现

    千次阅读 2014-09-25 08:38:13
    easy Ui 的弹窗有很多种  我就来说下我实现的一种感觉用起来很方便的 首先 引用的easy ui JS 一样还有他的样式CSS文件也要引用 下面我们弹窗定义个DIV  弹窗的内容这里需要注意的是 div的样式要隐藏 ...
  • easy-ui之datagrid 单元格样式设置

    千次阅读 2016-05-06 16:26:27
    解决方法: var editors = $("#invoiceDetailDatagrid").datagrid('getEditors',editingRowIndex); var sumEditor = editors[5];... //设置sum字段为只读属性 $(sumEditor.target).attr({'rea
  • 学习使用easy-ui中combotree插件文档

    万次阅读 2014-05-20 22:03:13
    学习使用easy-ui中combotree插件文档
  • var grid = $('#grid'); var options = grid.datagrid('getPager').data("pagination").options; var curr = options.pageNumber; alert('当前页数:'+max); var total = options.to
  • $('#dataGrid').datagrid('getRows')[rowIndex].field控件id未dataGrid,rowIndex为想要获取行的索引,field为该表的列
  • Easy UI】easyui 异步上传文件

    千次阅读 2016-08-11 15:05:29
    学习js就是一个不断坚持的过程。 easyUI 如何实现用js上传文件类型呢, 基本格式: function ImportShipmentStatusList() { if ($("#fuImportMultipleShipmentStatus").val() == "" ) { ...
  • easy ui tree + checkbox多选

    千次阅读 2014-06-30 21:41:36
    目的: 树状结构,并且
  • easy ui datagrid checkbox 默认选中问题

    千次阅读 2016-12-08 11:51:04
    $('#dg').datagrid({ url : '', //fitColumns : true,//使用该属性后不能用冻结列 border : false,//定义边框 rownumbers:true,//显示行号 pagination : true,//定义分页组件 idField : 'id', ...
  • jQuery Easy UI整理笔记目录

    千次阅读 2014-09-01 23:32:39
    jQuery Easy UI整理笔记目录 yi
1 2 3 4 5 ... 20
收藏数 33,058
精华内容 13,223
关键字:

easyui