乐趣区

关于easyui:01商品查询业务逻辑的实现

jiezi

这是一个表格，将来展示数据一行一行的标识。

UI 框架 - 表格数据展示阐明

外围：JS 中须要什么数据，后端程序员就封装什么数据！！

门 Demo

大抵浏览浏览。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>EasyUI-3- 菜单按钮 </title>
<script type="text/javascript"
 src="/js/jquery-easyui-1.4.1/jquery.min.js"></script>
<script type="text/javascript"
 src="/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
<script type="text/javascript"
 src="/js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" type="text/css"
 href="/js/jquery-easyui-1.4.1/themes/icon.css" />
<link rel="stylesheet" type="text/css"
 href="/js/jquery-easyui-1.4.1/themes/default/easyui.css" />
<script type="text/javascript">
   /* 通过 js 创建表格 */ $(function(){$("#table3").datagrid({
         /* 定义工具栏 */ toolbar: [{       
              iconCls: 'icon-edit',       
              handler: function(){alert("点击工具栏")}      
              },'-',{         
              iconCls: 'icon-help',       
              handler: function(){alert('帮忙工具栏')}      
              },'-',{
                 iconCls: 'icon-save',
                 handler: function(){alert('保留工具栏')}
              }],  
         columns:[[{field:'itemIds',checkbox:true},
         {field:'itemId',title:'商品 Id',width:100}, 
         {field:'itemName',title:'商品名称',width:100}, 
         {field:'itemDesc',title:'商品形容',width:100,align:'right'} 
         ]],
         fitColumns:true,        // 主动适应
 url:"datagrid_item.json", // 申请数据的地址
 method:"get",          // 提交形式
 striped:true,          // 有条纹的行
 nowrap:true,           // 进步加载性能
 loadMsg:"正在加载",         // 加载数据时打印
 pagination:true,        // 分页加载
 rownumbers:true,        // 显示行号
 //singleSelect:true,         // 只容许选中一行数据
 })
   })
</script>
</head>
   <body>
      <h1>Easy- 表格数据 1 </h1>
      <div>
         <table class="easyui-datagrid" style="width:400px;height:250px">
            <thead> 
               <tr> 
                  <th data-options="field:'code'">Code</th> 
                  <th data-options="field:'name'">Name</th> 
                  <th data-options="field:'price'">Price</th> 
               </tr> 
            </thead> 
            <tbody> 
               <tr> 
                  <td>001</td>
                  <td>name1</td>
                  <td>2323</td> 
               </tr> 
            
               <tr> 
                  <td>002</td>
                  <td>name2</td>
                  <td>4612</td> 
               </tr>
               
               <tr> 
                  <td>003</td>
                  <td>name3</td>
                  <td>4612</td> 
               </tr>  
            </tbody> 
         </table>
      </div>
      <hr/>
      <h1> 通过数据申请创建表格 </h1>
      <div>
         看到 URL: 属性 在背地解析时就是一个 AJAX $.GET(XXXX)
         定义表格，并且通过 url 拜访 json 数据，fitColumns:true 示意主动适应，singleSelect:true 示意选中单个
 <table class="easyui-datagrid" style="width:500px;height:300px"
 data-options="url:'datagrid_data.json',method:'get',
 fitColumns:true,singleSelect:false,pagination:true">
            <thead> 
               <tr> 
                  <th data-options="field:'code',width:100">Code</th> 
                  <th data-options="field:'name',width:100">Name</th> 
                  <th data-options="field:'price',width:100,align:'right'">Price</th>
               </tr> 
            </thead> 
         </table> 
      </div>
      <hr/>
      <h1> 通过 js 创建表格 </h1>
      <table id="table3" style="width:700px">
         
      </table>
   </body>
</html>

次要代码局部截图：

fitColumns 自适应
singleSelect 单选
pagination 分页

分页成果

发动 ajax 申请

返回值

页面解析数据

退出移动版