grid

          grid

            BlogJava :: 首頁 :: 聯系 :: 聚合  :: 管理
            78 Posts :: 0 Stories :: 62 Comments :: 0 Trackbacks

          #

          表格:分組
                          
                      
                                

          參考示例分組

                             
                     

          調用分組方法:groupBy。如下代碼:

          grid.groupBy("gender", "asc");
          

                 

                 

                     
                 

             
          posted @ 2012-11-22 16:54 nikofan 閱讀(1900) | 評論 (0)編輯 收藏

          表格:右鍵菜單
                          
                               

          參考示例右鍵菜單


                      
                    

          一:創建ContextMenu

          <ul id="gridMenu" class="mini-contextmenu" onbeforeopen="onBeforeOpen">              
              <li name="add" iconCls="icon-add" onclick="onAdd">新增</li>
              <li name="edit" iconCls="icon-edit" onclick="onEdit">編輯節點</li>
              <li name="remove" iconCls="icon-remove" onclick="onRemove">刪除節點</li>        
          </ul>
          

                     

          二:設置表格contextmenu

          <div id="datagrid1" class="mini-datagrid" 
              contextMenu="#gridMenu">
              ......
          </div>   
          

                     

          三:監聽beforeopen事件          

          監聽右鍵菜單的beforeopen事件,可以對右鍵菜單精確控制。

          function onBeforeOpen(e) {
              var grid = mini.get("datagrid1");
              var menu = e.sender;
                      
              var row = grid.getSelected();
              var rowIndex = grid.indexOf(row);            
              if (!row ||  rowIndex== 0) {
                  e.cancel = true;
                  //阻止瀏覽器默認右鍵菜單
                  e.htmlEvent.preventDefault();
                  return;
              }
              ////////////////////////////////
              var editItem = mini.getbyName("edit", menu);
              var removeItem = mini.getbyName("remove", menu);
              editItem.show();
              removeItem.enable();
          
              if (rowIndex == 1) {
                  editItem.hide();
              }
              if (rowIndex == 1) {
                  removeItem.disable();
              }
          
          }
          

                     

          四:表頭菜單headerContextMenu


           創建同樣一個menu菜單對象,設置給表格的headerContextMenu屬性即可。
          posted @ 2012-11-21 17:20 nikofan 閱讀(2273) | 評論 (0)編輯 收藏

          單元格編輯驗證
                      
                      
                     

          參考示例單元格編輯驗證


                               

          一:設置編輯器驗證規則

          <div field="loginname" width="120" headerAlign="center" allowSort="true">員工帳號
              <input property="editor" class="mini-textbox" style="width:100%;" required="true" vtype="email"  />
          </div>       
          
          使用編輯器的vtype和onvalidation事件,可以實現編輯器驗證規則。詳細可以查看:數據驗證
                     

          二:監聽處理cellcommitedit事件

          //提交單元格編輯數據前激發
          function onCellCommitEdit(e) {
              var editor = e.editor;
              editor.validate();
              if (editor.isValid() == false) {
                  alert(editor.getErrorText());
                  e.cancel = true;
              }
          }
          grid.on("cellcommitedit", onCellCommitEdit);
          

          Grid的cellcommitedit事件,在編輯值提交前激發。此時,可以調用編輯器的驗證方法validate,判斷輸入的內容是否符合驗證規則。
          posted @ 2012-11-20 15:38 nikofan 閱讀(3213) | 評論 (1)編輯 收藏

          CRUD之:彈出面板編輯
                      
                                

          參考示例CRUD之:彈出面板編輯


                                

          一:創建彈出編輯面板

          <div id="editWindow" class="mini-window" title="Window" style="width:650px;" 
              showModal="true" allowResize="true" allowDrag="true"
              >
              <div id="editform" class="form" >
                  <input class="mini-hidden" name="id"/>
                  <table style="width:100%;">
                      <tr>
                          <td style="width:80px;">員工帳號:</td>
                          <td style="width:150px;"><input name="loginname" class="mini-textbox" /></td>
                          <td style="width:80px;">姓名:</td>
                          <td style="width:150px;"><input name="name" class="mini-textbox" /></td>
                          <td style="width:80px;">薪資:</td>
                          <td style="width:150px;"><input name="salary" class="mini-textbox" /></td>
                      </tr>
                      <tr>
                          <td>性別:</td>
                          <td><input name="gender" class="mini-combobox" url="mini_JSPath + '../../demo/data/genders.txt'"/></td>
                          <td>年齡:</td>
                          <td><input name="age" class="mini-spinner" minValue="0" maxValue="200" value="25"  /></td>
                          <td>出生日期:</td>
                          <td><input name="birthday" class="mini-datepicker" /></td>
                      </tr>
                      <tr>
                          <td style="text-align:right;padding-top:5px;padding-right:20px;" colspan="6">
                              <a class="Update_Button" href="javascript:updateRow()">Update</a> 
                              <a class="Cancel_Button" href="javascript:cancelRow()">Cancel</a>
                          </td>                
                      </tr>
                 
                  </table>
              </div>
          </div>
          
                     

          二:面板操作          

          彈出加載面板數據:

          var editWindow = mini.get("editWindow");
          editWindow.show();
          var form = new mini.Form("#editform");
          form.loading();
          $.ajax({
              url: "../data/DataService.aspx?method=GetEmployee&id=" + row.id,
              success: function (text) {
                  var o = mini.decode(text);
                  form.setData(o);
                  form.unmask();
              },
              error: function () {
                  alert("表單加載錯誤");
              }
          });
          
          保存提交面板數據:
          var form = new mini.Form("#editform");
          var o = form.getData();
          
          grid.loading("保存中,請稍后......");
          var json = mini.encode([o]);
          $.ajax({
              url: "../data/DataService.aspx?method=SaveEmployees",
              data: { employees: json },
              success: function (text) {
                              
                  grid.reload();
              },
              error: function (jqXHR, textStatus, errorThrown) {
                  alert(jqXHR.responseText);
              }
          });
          
          editWindow.hide();
          
              
          posted @ 2012-11-19 22:33 nikofan 閱讀(1934) | 評論 (0)編輯 收藏

          CRUD之:行內表單編輯
                      
                                           

          參考示例CRUD之:行內表單編輯


                                

          一:創建編輯表單

          <div id="editForm1" style="display:none;padding:5px;position:relative;">
              <input class="mini-hidden" name="id"/>
              <table style="width:100%;">
                  <tr>
                      <td style="width:80px;">員工帳號:</td>
                      <td style="width:150px;"><input name="loginname" class="mini-textbox" /></td>
                      <td style="width:80px;">姓名:</td>
                      <td style="width:150px;"><input name="name" class="mini-textbox" /></td>
                      <td style="width:80px;">薪資:</td>
                      <td style="width:150px;"><input name="salary" class="mini-textbox" /></td>
                  </tr>
                  <tr>
                      <td>性別:</td>
                      <td><input name="gender" class="mini-combobox" data="Genders"/></td>
                      <td>年齡:</td>
                      <td><input name="age" class="mini-spinner" minValue="0" maxValue="200" value="25"  /></td>
                      <td>出生日期:</td>
                      <td><input name="birthday" class="mini-datepicker" /></td>
                  </tr>
                  <tr>
                      <td style="text-align:right;padding-top:5px;padding-right:20px;" colspan="6">
                          <a class="Update_Button" href="javascript:updateRow();">Update</a> 
                          <a class="Cancel_Button" href="javascript:cancelRow();">Cancel</a>
                      </td>                
                  </tr>
              </table>
          </div>
          
                               

          二:嵌入詳細行          

          //顯示行詳細
          grid.hideAllRowDetail();
          grid.showRowDetail(row);
          //將editForm元素,加入行詳細單元格內
          var td = grid.getRowDetailCellEl(row);
          td.appendChild(editForm);
          editForm.style.display = "";
          
                    

          三:加載表單           

          var form = new mini.Form("editForm1");
          if (grid.isNewRow(row)) {                    
              form.reset();
          } else {
              form.loading();
              $.ajax({
                  url: "../data/DataService.aspx?method=GetEmployee&id=" + row.id,
                  success: function (text) {
                      var o = mini.decode(text);
                      form.setData(o);                            
          
                      form.unmask();
                  }
              });
          }
          
                    

          四:提交表單 

          var form = new mini.Form("editForm1");
          var o = form.getData();           
          grid.loading("保存中,請稍后......");
          var json = mini.encode([o]);
          $.ajax({
              url: "../data/DataService.aspx?method=SaveEmployees",
              data: { employees: json },
              success: function (text) {
                  grid.reload();
              },
              error: function (jqXHR, textStatus, errorThrown) {
                  alert(jqXHR.responseText);
              }
          });
          
          posted @ 2012-11-16 16:03 nikofan 閱讀(547) | 評論 (0)編輯 收藏

          CRUD之:行編輯
                                 

          參考示例CRUD之:行編輯

                               

          一:創建單元格編輯器

          <div id="datagrid1" class="mini-datagrid" style="width:700px;height:280px;" 
              url="../data/DataService.aspx?method=SearchEmployees" 
          >
              <div property="columns">
                  <div name="action" width="120" headerAlign="center" align="center" renderer="onActionRenderer" cellStyle="padding:0;">#</div>
                  <div field="loginname" width="120" headerAlign="center" allowSort="true">員工帳號
                      <input property="editor" class="mini-textbox" />
                  </div>                
                  <div field="gender" width="100" allowSort="true" renderer="onGenderRenderer" align="center" headerAlign="center">性別
                      <input property="editor" class="mini-combobox" style="width:100%;" data="[{id:1,text:'男'}, {id:2, text: '女'}]"/>                
                  </div>            
                  <div field="age" width="100" allowSort="true">年齡
                      <input property="editor" class="mini-spinner" minValue="0" maxValue="200" value="25" style="width:100%;"/>
                  </div>
                  <div field="birthday" width="100" allowSort="true" dateFormat="yyyy-MM-dd">出生日期
                      <input property="editor" class="mini-datepicker" style="width:100%;"/>
                  </div>                                    
                  <div field="createtime" width="100" headerAlign="center" dateFormat="yyyy-MM-dd" allowSort="true">創建日期</div>                
              </div>
          </div>            

          比如:mini-textbox的property為"editor",表示是此列的編輯器。




                     

          二:編輯操作

          開始編輯行:
          grid.beginEditRow(row);
          
          取消編輯:
          grid.cancelEdit();
          

          提交編輯數據:

          var rowData = grid.getEditRowData(row);
          grid.loading("保存中,請稍后......");
          var json = mini.encode([rowData]);
          $.ajax({
              url: "../data/DataService.aspx?method=SaveEmployees",
              data: { employees: json },
              success: function (text) {
                  grid.reload();
              },
              error: function (jqXHR, textStatus, errorThrown) {
                  alert(jqXHR.responseText);
              }
          });
          
          posted @ 2012-11-14 16:32 nikofan 閱讀(4975) | 評論 (2)編輯 收藏

          CRUD之:單元格編輯
                      
                      
                    

          參考示例單元格編輯


                     


                     

          一:創建單元格編輯器

          <div id="datagrid1" class="mini-datagrid" style="width:800px;height:280px;" 
              url="../data/AjaxService.aspx?method=SearchEmployees" idField="id"
              allowResize="true" pageSize="20" 
              allowCellEdit="true" allowCellSelect="true" multiSelect="true">
              <div property="columns">
                  <div type="checkcolumn"></div>            
                  <div field="loginname" width="120" headerAlign="center" allowSort="true">員工帳號
                      <input property="editor" class="mini-textbox" style="width:100%;"/>
                  </div>                
                  <div field="gender" width="100" renderer="onGenderRenderer" align="center" headerAlign="center">性別
                      <input property="editor" class="mini-combobox" style="width:100%;" data="Genders"/>                
                  </div>
                  <div field="age" width="100" allowSort="true" >年齡
                      <input property="editor" class="mini-spinner" minValue="0" maxValue="200" value="25" style="width:100%;"/>
                  </div>
                  <div field="birthday" width="100" allowSort="true" dateFormat="yyyy-MM-dd">出生日期
                      <input property="editor" class="mini-datepicker" style="width:100%;"/>
                  </div>    
                  <div field="remarks" width="120" headerAlign="center" allowSort="true">備注
                      <input property="editor" class="mini-textarea" style="width:100%;" minHeight="80"/>
                  </div>                                 
                  <div field="createtime" width="100" headerAlign="center" dateFormat="yyyy-MM-dd" allowSort="true">創建日期</div>
              </div>
          </div>           

          設置allowCellEdit和allowCellSelect后,表格為單元格編輯模式。

                   

          二:編輯操作          

          增加行:

          function addRow() {
              var newRow = { name: "New Row" };
              grid.addRow(newRow, 0);
          }
          
          刪除行:
          function removeRow() {
              var rows = grid.getSelecteds();
              if (rows.length > 0) {
                  grid.removeRows(rows, true);
              }
          }
          
          保存數據:
          function saveData() {
              //獲得增加、刪除、修改的記錄集合
              var data = grid.getChanges();
              var json = mini.encode(data);
              grid.loading("保存中,請稍后......");        
              $.ajax({
                  url: "../data/AjaxService.aspx?method=SaveChangedEmployees",
                  data: { data: json },
                  type: "post",
                  success: function (text) {
                      grid.reload();
                  },
                  error: function (jqXHR, textStatus, errorThrown) {
                      alert(jqXHR.responseText);
                  }
              });
          }
          
                    

          三:服務端處理

          public void SaveChangedEmployees()
          {
              String json = Request["data"];
              ArrayList rows = (ArrayList)PluSoft.Utils.JSON.Decode(json);
          
              foreach (Hashtable row in rows)
              {
                  //根據記錄狀態,進行不同的增加、刪除、修改操作
                  String state = row["_state"] != null ? row["_state"].ToString() : "";
                  if(state == "added")
                  {
                      row["createtime"] = DateTime.Now;
                      new TestDB().InsertEmployee(row);
                  }
                  else if (state == "removed" || state == "deleted")
                  {
                      String id = row["id"].ToString();
                      new TestDB().DeleteEmployee(id);
                  }
                  else if (state == "modified")
                  {
                      new TestDB().UpdateEmployee(row);
                  }
              }
          }
          
                     
          posted @ 2012-11-13 22:38 nikofan 閱讀(2265) | 評論 (0)編輯 收藏

          詳細行
                          
                      
                             

          參考示例詳細行

                      
                     

          表格的"showRowDetail"方法可以為一個普通表格行增加了一個詳細行。          

          通過"getRowDetailCellEl"方法獲得此詳細行的DOM元素后,可以在此詳細行DOM元素內加入任何HTML內容。

          function onShowRowDetail(e) {
              var grid = e.sender;
              var row = e.record;
          
              var td = grid.getRowDetailCellEl(row);
          
              $.ajax({
                  url: "../data/DataService.aspx?method=GetEmployee&id=" + row.id,
                  success: function (text) {
                      var o = mini.decode(text);
                      //生成詳細信息html
          
                      if (o.gender == 1) o.gender_name = "男";
                      else if (o.gender == 2) o.gender_name = "女";
                      else o.gender_name = "";
          
                      o.birtyday_name = o.birthday ? mini.formatDate(o.birthday, "yyyy-MM-dd") : "";
          
                      td.innerHTML = "";
                      $("#formTemplate").tmpl(o).appendTo(td); ;
                  }
              });
          }
          
          posted @ 2012-11-12 15:55 nikofan 閱讀(2528) | 評論 (0)編輯 收藏

          表格:匯總行
                          
                                

          參考示例匯總行
                     

          Javascript處理          

          通常在表格的"load"數據加載完成事件中,更新表格的匯總信息:

          grid.on("load", onGridLoad);
          
          function onGridLoad(e) {
              var result = e.result;
              var grid = e.sender;
          
              var cellEl = grid.getSummaryCellEl("ageColumn");
              cellEl.style.cssText = "text-align:right";
              cellEl.innerHTML = "<span style='color:Brown;'>"
                              + 'Min=' + result.minAge + "<br/>"
                              + 'Max=' + result.maxAge + "<br/>"
                              + 'Avg=' + result.avgAge + "<br/>"
                              + "</span>";
          
              var cellEl = grid.getSummaryCellEl("totalColumn");
              cellEl.innerHTML = "總員工數:" + result.total;
          }
          
                 
                     

          服務端數據處理          

          在服務端返回表格分頁數據時,我們額外增加了一些屬性,比如minAge、maxAge、avgAge等,代碼如下:

          public Hashtable SearchEmployees(string key, int index, int size, string sortField, string sortOrder)
          {        
              ArrayList employees = ......;   //分頁后的數據
              int totalCount = ......;        //總記錄數
          
              Hashtable result = new Hashtable();
              result["data"] = employees;
              result["total"] = totalCount;
          
              //生成一些匯總信息
              ArrayList ages = DBUtil.Select("select min(age) as minAge, max(age) as maxAge, avg(age) as avgAge from t_employee");
              Hashtable ageInfo = ages[0] as Hashtable;
              result["minAge"] = ageInfo["minAge"];
              result["maxAge"] = ageInfo["maxAge"];
              result["avgAge"] = ageInfo["avgAge"];
          
              return result;
          }
          
          posted @ 2012-11-09 16:07 nikofan 閱讀(4518) | 評論 (1)編輯 收藏

          表格:過濾行
                          
                               

          參考示例行過濾
                     

          一:定義過濾器         

          設置表格"showFilter"屬性為"true"后,可以在列配置對象上定義過濾器對象:

          <div field="name" width="120" headerAlign="center" allowSort="true">姓名
              <!--定義此列的過濾器對象,注意property="filter"-->
              <input id="nameFilter" property="filter" class="mini-textbox" onvaluechanged="onNameFilterChanged" style="width:100%;" />
          </div>   
                     

          二:處理"valuechanged"事件      

          在"onvaluechanged"值變化時,會自動調用一個過濾方法onNameFilterChanged。此方法由開發者實現,如下:

          function onNameFilterChanged(e) {
              var textbox = e.sender;
              var key = textbox.getValue();
          
              grid.load({ key: key });
          }
          
          posted @ 2012-11-08 15:46 nikofan 閱讀(4795) | 評論 (10)編輯 收藏

          僅列出標題
          共8頁: 上一頁 1 2 3 4 5 6 7 8 下一頁 
          主站蜘蛛池模板: 永和县| 永泰县| 来凤县| 瓦房店市| 炎陵县| 交口县| 河东区| 英超| 苗栗市| 松潘县| 冷水江市| 商水县| 静乐县| 西畴县| 栖霞市| 澎湖县| 淮阳县| 通渭县| 罗田县| 黔东| 马关县| 城步| 绥中县| 井冈山市| 太白县| 鹿泉市| 龙泉市| 姜堰市| 桐梓县| 南开区| 屏东县| 丰宁| 麦盖提县| 大石桥市| 涞源县| 精河县| 勐海县| 岱山县| 吉木萨尔县| 收藏| 新郑市|