最近工作很輕松,整理了些關于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快速開發,希望大家喜歡。
新聞熱點
疑難解答