ホームページ > ウェブフロントエンド > jsチュートリアル > jquery Easyui の迅速な開発の概要_jquery

jquery Easyui の迅速な開発の概要_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
リリース: 2016-05-16 15:43:59
オリジナル
1375 人が閲覧しました

最近作業がとても楽になりました。easyui の datagrid に関する開発ドキュメントをいくつかまとめました。非常に詳しく書かれているので、コピーして貼り付けるだけですぐに使用できます。

コードの内容は次のとおりです:

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

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

<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;

}

ログイン後にコピー

上記のコード例は、jquery Easyui の急速な開発を共有しています。気に入っていただければ幸いです。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート