45fan.com - 路饭网

搜索: 您的位置主页 > 电脑频道 > 编程代码 > 阅读资讯:jquery Easyui快速开发的教程分享

jquery Easyui快速开发的教程分享

2015-09-09 15:22:15 来源:www.45fan.com 【

jquery Easyui快速开发的教程分享

最近工作很轻松,整理了些关于easyui的datagrid的开发文档,整理的比较细致,直接复制粘贴就可以使用了。

代码内容如下:

 <link href="../../Content/easyUI/themes/default/easyui.css" rel="stylesheet" type="text/css" />
  <link href="../../Content/easyUI/themes/icon.css" rel="stylesheet" type="text/css" />
  <script src="../../Scripts/jquery-...min.js" type="text/javascript"></script>
  <script src="../../Scripts/jquery.easyui.min.js" type="text/javascript"></script>
  <script src="../../Scripts/easyui-lang-zh_CN.js" type="text/javascript"></script>
  <script src="../../Scripts/datapattern.js" type="text/javascript"></script>
 :<script type="text/javascript">
  $(function(){
    loadData();
  });
   function loadData() {
   $('#tt').datagrid({
     url: '/Home/GetUserInfo',
     title: '用户数据表格',
     width: ,
     height: ,
     fitColumns: true, //列自适应
     nowrap: false,
     idField: 'ID',//主键列的列明
     loadMsg: '正在加载用户的信息...',
     pagination: true,//是否有分页
     singleSelect: false,//是否单行选择
     pageSize:,//页大小,一页多少条数据
     pageNumber: ,//当前页,默认的
     pageList: [, , ],
     queryParams: {},//往后台传递参数
     columns: [[//c.UserName, c.UserPass, c.Email, c.RegTime
      { field: 'ck', checkbox: true, align: 'left', width: },
      { field: 'ID', title: '编号', width: },
      { field: 'UserName', title: '姓名', width: },
      { field: 'UserPass', title: '密码', width: },
      { field: 'Email', title: '邮箱', width: },
      { field: 'RegTime', title: '时间', width: , align: 'right',
       formatter: function (value, row, index) {
         return (eval(value.replace(/\/Date\((\d+)\)\//gi, "new Date($)"))).pattern("yyyy-M-d");
        }
      }
     ]],
     toolbar: [{
      id: 'btnGet',
      text: '删除',
      iconCls: 'icon-add',
      handler: function () {
       var rows = $('#tt').datagrid('getSelections');
       if (!rows || rows.length == ) {
        //alert("请选择要修改的商品!");
        $.messager.alert("提醒", "请选择要删除的记录!", "error");
        return;
       }
      }
     }],
    });
   }
  </script>
 <div>
  <table id="tt" style="width: px;" title="标题,可以使用代码进行初始化,也可以使用这种属性的方式" iconcls="icon-edit">
  </table>
 </div>
 //将序列化成json格式后日期(毫秒数)转成日期格式
 function ChangeDateFormat(cellval) {
  var date = new Date(parseInt(cellval.replace("/Date(", "").replace(")/", ""), ));
  var month = date.getMonth() + < ? "" + (date.getMonth() + ) : date.getMonth() + ;
  var currentDate = date.getDate() < ? "" + date.getDate() : date.getDate();
  return date.getFullYear() + "-" + month + "-" + currentDate;
 }

以上代码示例给大家分享了jquery Easyui快速开发,希望大家喜欢。


本文地址:http://www.45fan.com/bcdm/20504.html
Tags: jquery 快速 Easyui
编辑:路饭网
推广内容
推荐阅读
热门推荐
推荐文章
关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | App | 返回顶部