詳解jQuery中的easyui

2019-11-19 13:04:12

字體：大中小

來源：轉載

供稿：網友

jQuery EasyUI是一組基于jQuery的UI插件集合體，而jQuery EasyUI的目標就是幫助web開發者更輕松的打造出功能豐富并且美觀的UI界面。開發者不需要編寫復雜的javascript，也不需要對css樣式有深入的了解，開發者需要了解的只有一些簡單的html標簽。

一，easyui---datagrid綁定數據的簡單測試：

1.數據庫中的UserInfo表及數據測試：

2.DAL層：

//分頁，模糊查詢（pageNum-1)*pageSize+1----從第幾條數據開始，pageNum*pageSize----查詢到那一條結束

//查詢總的條數

3.一般處理程序（UserInfoHander.ashx）：

4.datagrid綁定數據：

<script type="text/javascript"> $(function () { loadUser(); $("#datagrid").datagrid({ url: "UserInfoHander.ashx",//請求一般處理程序type: "post", title: "用戶信息表",remoteSort: false,//默認為true 如果對本地數據排序必須設置為false height: 500,//設置表格的高度pageSize: 5,//每頁顯示的數據pageList: [1, 2, 3, 4, 5, 6], pagination: true,//是否開啟分頁rownumbers: true,//是否顯示行號singleSelect: true,//是否只能單行選中queryParams: getQueryParams(),//返回參數columns: [[ { field: "ck", checkbox: true }, { field: "id", title: "編號", width: 100, sortable: true },//sortable: true 指定字段進行數據排序{ field: "name", title: "用戶名", width: 150 }, { field: "phone", title: "電話", width: 150 }, { field: "address", title: "地址", width: 300 }//此處的id,name,phone,address字段與實體類中提供get,set屬性一 一 對 應 ]],<script />

5.效果圖：