Heim  >  Artikel  >  Web-Frontend  >  jquery Easyui schnelle Entwicklung summary_jquery

jquery Easyui schnelle Entwicklung summary_jquery

WBOY
WBOYOriginal
2016-05-16 15:43:591257Durchsuche

Die Arbeit war in letzter Zeit sehr einfach. Ich habe einige Entwicklungsdokumente zum Datagrid von easyui zusammengestellt. Sie sind recht detailliert und können durch Kopieren und Einfügen direkt verwendet werden.

Der Codeinhalt ist wie folgt:

 <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() + < &#63; "" + (date.getMonth() + ) : date.getMonth() + ;
   var currentDate = date.getDate() < &#63; "" + date.getDate() : date.getDate();
   return date.getFullYear() + "-" + month + "-" + currentDate;
 }

Die obigen Codebeispiele zeigen Ihnen die schnelle Entwicklung von jquery Easyui, ich hoffe, es gefällt Ihnen.

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn