GT-Grid的实例

下面是GT-Grid的详细使用：

 1.首先需要在页面定义gt-grid展示容器，一般都是用<div></div>标签来实现：

<!-- 表格容器DIV -->
  <div id="gt_grid" style="width:100%" >
  </div>

2.需要导入gt-grid的js文件和样式：

<!-- 表格必选项 -->
<link rel="stylesheet" type="text/css" href="<%=contextPath%>/style/ui_component/gt-grid/gt_grid.css" />
<link rel="stylesheet" type="text/css" href="<%=contextPath%>/style/ui_component/gt-grid/skin/china/skinstyle.css" />
<link rel="stylesheet" type="text/css" href="<%=contextPath%>/style/ui_component/gt-grid/skin/vista/skinstyle.css" />
<link rel="stylesheet" type="text/css" href="<%=contextPath%>/style/ui_component/gt-grid/skin/mac/skinstyle.css" />

<script type="text/javascript" src="<%=contextPath%>/style/ui_component/gt-grid/gt_msg_cn.js"></script>
<script type="text/javascript" src="<%=contextPath%>/style/ui_component/gt-grid/gt_msg_en.js"></script>
<script type="text/javascript" src="<%=contextPath%>/style/ui_component/gt-grid/gt_grid_all.js"></script>

3.页面中声明grid变量：

var gt_grid;

然后需要做的就是定义该页面gt-grid组件声明js文件：test.js文件；

4.test.js文件中需要定义的内容：

1).定义gt-grid的id：

var grid_id = "gt_grid" ;
//查询action url, 根据实际情况修改
var queryUrl = APP_PATH + '/page/dictionary/queryDictionary.do?method=pageQuery';//这是是查询数据的请求url
2).定义数据集：

/** 数据集定义 与实体BEAN转换后的JSON属性一一对应 */
var dsOption= {
 fields :[
  {name: 'id'},
  {name : 'code'},
  {name : 'displayNameZH'},
  {name : 'displayNameEN'},
  {name : 'isSystem'},
  {name : 'isSystemDisplay'},
  {name : 'type'  },
  {name : 'state'},
 ]
}

3).列定义：

/** 列定义 */
var colsOption = [
  {id: 'id' ,isCheckColumn : false, frozen : false, header: headerCheckbox,width:checkSize, title: ApplicationResources.checkAll, sortable:false, renderer:checkRender, resizable:false },//checkRender函数在第四步说明
  {id: 'code' , header: ApplicationResources.dictionary_dictionaryCode , sortable:false ,filterable : true},
  {id: 'displayNameZH' , header: ApplicationResources.dictionary_dictionaryNameZH , sortable:false ,filterable : true},
  {id: 'displayNameEN' , header: ApplicationResources.dictionary_dictionaryNameEN , sortable:false ,filterable : true},
  {id: 'isSystem' , header: ApplicationResources.dictionary_dictionaryIsSystem ,hidden:true, sortable:false ,filterable : true},
  {id: 'isSystemDisplay' , header: ApplicationResources.dictionary_dictionaryIsSystem , sortable:false ,filterable : true},
  {id: 'type' , header: ApplicationResources.dictionary_dictionaryType , sortable:false},
  {id: 'state' , header: ApplicationResources.dictionary_dictionaryState , sortable:false},
  {id: 'opt' , header: ApplicationResources.operation , width :'20%',sortable:false, renderer:myrender, fieldName:'id'}//myrender函数在第四步说明
];

4).定义渲染列时候需要进行特殊渲染的列，渲染函数定义：

/** 渲染勾选框的列 */

function checkRender(value, record, columnObj, grid, colNo, rowNo) {
    if(record.isSystem == "true"){
     return "<input id='key_id' type='checkbox' disabled name='key_id'  value='"
   + value + "'/>";
    }else{
     return "<input id='key_id' type='checkbox' οnclick='KeyStoreDoCheck(this);' name='key_id' value='"
   + value + "'/>";
    }
 
}

 

/** 渲染操作列 */
function myrender(value ,record,columnObj,grid,colNo,rowNo) {
  var exp = /.*\&nbsp;\|\&nbsp;$/;
  var ret = "";
  if(editInfo == "true" && record.isSystem != "true"){
   ret = "<a href='"+APP_PATH+"/page/dictionary/dictionary.do?method=modifyIni&id="+value+"'>"+ApplicationResources.edit+"</a>";
  }
  if(viewInfo == "true"){
    if (ret != '' && ret.match(exp) == null) {
   ret = ret + "&nbsp;|&nbsp;";
   }
        ret += "<a href='"+APP_PATH+"/page/dictionary/dictionary.do?method=showDetail&id="+value+"'>"+ApplicationResources.detail+"</a>";
     }
  return ret;
}

5).表格定义，一般都是这个定义，除非有特殊要求，里面的属性在上一篇中已经提及，大家有兴趣可以参照上篇文章进行试验：

/** 表格定义 */
var gridOption={
language: language1,
 id : grid_id,//此处的id指的就是声明的GT-Grid
 //width: "100%",
 //autoWidth:true,
 height: "200",
    //resizable : true,
    remotePaging : true ,
 pageSize : 10,
    encoding : 'UTF-8',
    language : language1,
 container : 'gt_grid',//谨记此处的容器：就是指的页面上展示列表时候的div标签id；
    remoteFilter : false,
 //toolbarPosition : null,
 showGridMenu : false ,
 toolbarContent : 'nav | pagesize | reload | info',
 pageSizeList : pageSizeP,
 showIndexColumn : false ,
 lightOverRow:true,
    loadURL:queryUrl,
 //dataset : dsOption ,
    selectRowByCheck : true,
    beforeRefresh : authenAuthority(),
    beforeGotoPage:beforeGotoPage,//使不无数据时，后一页不可用用
    onComplete: completeHandler, //必须添加
 columns : colsOption
 //onClickCell:cellClickHandler
};

amsgrid = new GT.Grid( gridOption );
GT.Utils.onLoad( GT.Grid.render(amsgrid) );

 

5.下面就是后台代码，实体类：

public class Dictionary implements IGridRow {

    /**
     *  字典类型
     */
    private String type;

    /**
     *  关键字状态
     *
     */
    private String state;
   
    /**
     *  字典数据编号
     */
    private String code;
   
    /**
     *  数据字典显示名称
     */
    private List<String> displayNames;
   
    /**
     *  中文显示名称
     */
    private String displayNameZH;
   
    /**
     *  英文显示名称
     */
    private String displayNameEN;
   
    /**
     *  是否是系统内置字典数据
     */
    private String isSystem;

 

   /****************上面属性的get，set方法都自己去完成****************/

 

/**

* (non-Javadoc)  转换为JSON数据
*/
    public String toJSON(Locale locale) {
        JSONObject jsonObj = new JSONObject();
        try {
            jsonObj.put("id", this.getId());
            jsonObj.put("name", this.getName());
            jsonObj.put("type", this.getType());
            jsonObj.put("state", this.getState());
            jsonObj.put("code", this.getCode());
            jsonObj.put("isSystem", this.getIsSystem());
            if("true".equals(this.getIsSystem())){
                jsonObj.put("isSystemDisplay", WebContext.getMessage(locale, "yes"));
            } else{
                jsonObj.put("isSystemDisplay", WebContext.getMessage(locale, "no"));
            }
           
            jsonObj.put("displayNameZH", this.getDisplayNameZH());
            jsonObj.put("displayNameEN", this.getDisplayNameEN());
            return jsonObj.toString();
        } catch (JSONException e) {
            e.printStackTrace();
            return null;
        }
    }

}

   /****************上面方法toJSON就是把需要展示在列表中的数据转成json串****************/

6.Action类代码：

public class DictionaryAction{

// 查询方法：

    public ActionForward pageQuery(ActionMapping mapping, ActionForm form, HttpServletRequest request,
            HttpServletResponse response) {

//接收参数，参数判断，转换成查询条件 filter，放到service查询方法中；

//这个得自己写，这是调用service层的查询方法，返回值是PageList类型数据，PageList是自己定义的一个可以把数据转换成json串的类，在第7步中定义：

PageList pageList = service.pageQuery(filter);

// 打印数据到页面

try {
            response.setContentType("text/json; charset=utf-8");
            response.getWriter().print(pageList.toJSON(locale));
            response.getWriter().close();
        } catch (IOException e) {
            e.printStackTrace();
        }

}

}

7.PageList类定义：这个类很全，需要导入的类或jar包得自己去搞，最好是看懂意思了再去做

public class PageList implements Serializable{
 private static final long serialVersionUID = 1L;
 
 private static Logger logger = Logger.getLogger(PageList.class);
 /** 总页数 */
 private int totalPageNum;

 /** 每页记录数 */
 private int pageSize;

 /** 当前页数 */
 private int currentPageNum;

 /** 总记录数 */
 private int totalRecordNum;
   
    /** 错误信息 */
    private String errMsg;

 /** 当前页数据列表 */
 private List dataList;
   
    private ResNumTotalInfoReport resNumTotalInfoReport;

 public ResNumTotalInfoReport getResNumTotalInfoReport() {
        return resNumTotalInfoReport;
    }

    public void setResNumTotalInfoReport(ResNumTotalInfoReport resNumTotalInfoReport) {
        this.resNumTotalInfoReport = resNumTotalInfoReport;
    }

    public int getCurrentPageNum() {
  return currentPageNum;
 }

 public void setCurrentPageNum(int currentPageNum) {
  this.currentPageNum = currentPageNum;
 }

 public List getDataList() {
  return dataList;
 }

 public void setDataList(List dataList) {
  this.dataList = dataList;
 }

 public int getPageSize() {
  return pageSize;
 }

 public void setPageSize(int pageSize) {
  this.pageSize = pageSize;
 }

 public int getTotalPageNum() {
  return totalPageNum;
 }

 public void setTotalPageNum(int totalPageNum) {
  this.totalPageNum = totalPageNum;
 }

 public int getTotalRecordNum() {
  return totalRecordNum;
 }

 public void setTotalRecordNum(int totalRecordNum) {
  this.totalRecordNum = totalRecordNum;
 }

 public String toJSON(Locale locale) {
  JSONObject retVal = new JSONObject();
  try {
   JSONObject paegInfoJSON = new JSONObject();
   paegInfoJSON.put("totalRowNum", this.getTotalRecordNum());
   paegInfoJSON.put("pageNum", this.getCurrentPageNum());
   paegInfoJSON.put("pageSize", this.getPageSize());
   // paegInfoJSON.put("totalPageNum",100);

   JSONArray dataJSON = new JSONArray();
   for (int i = 0; dataList != null && i < dataList.size(); i++) {
    IGridRow gridRow = (IGridRow) dataList.get(i);
    dataJSON.put(new JSONObject(gridRow.toJSON(locale)));
   }
            if(this.resNumTotalInfoReport!=null){
                retVal.put("resNumTotalInfoReport", new JSONObject(this.resNumTotalInfoReport.toJSON(locale)));
            }else{
                JSONObject jsonObj = new JSONObject();
                jsonObj.put("totalNum", "0");
                jsonObj.put("windowsNum", "0");
                jsonObj.put("unixNum", "0");
                jsonObj.put("netEquipmentNum", "0");
                jsonObj.put("databaseNum", "0");
                jsonObj.put("appResourceNum", "0");
                jsonObj.put("otherNum", "0");
                retVal.put("resNumTotalInfoReport", jsonObj);
            }
   retVal.put("pageInfo", paegInfoJSON);
   retVal.put("data", dataJSON);
           
            // add err msg
            if (!StrUtil.isNullStr(this.getErrMsg())) {
                retVal.put("exception", this.getErrMsg());
            }

   logger.debug("retValue:" + retVal.toString());
  } catch (Exception e) {
   e.printStackTrace();
   try {
    retVal.put("exception", e.getMessage());
   } catch (Exception ex) {
    ex.printStackTrace();
   }
  }

  return retVal.toString();

 }
 
 public String toJSON(Locale locale,String beanName) {
     IGridBeanRow bean = null;
        try {
            bean = (IGridBeanRow) BeanFactory.getInstance()
                    .getBean(beanName);
        } catch (Exception e1) {
            e1.printStackTrace();
        }
       
        JSONObject retVal = new JSONObject();
        try {
            JSONObject paegInfoJSON = new JSONObject();
            paegInfoJSON.put("totalRowNum", this.getTotalRecordNum());
            paegInfoJSON.put("pageNum", this.getCurrentPageNum());
            paegInfoJSON.put("pageSize", this.getPageSize());
            // paegInfoJSON.put("totalPageNum",100);

            JSONArray dataJSON = new JSONArray();
            for (int i = 0; dataList != null && i < dataList.size(); i++) {
                BaseBusinessOBJ obj = (BaseBusinessOBJ) dataList.get(i);
                dataJSON.put(new JSONObject(bean.toBeanJSON(locale, obj)));
            }
            if(this.resNumTotalInfoReport!=null){
                retVal.put("resNumTotalInfoReport", new JSONObject(this.resNumTotalInfoReport.toJSON(locale)));
            }else{
                JSONObject jsonObj = new JSONObject();
                jsonObj.put("totalNum", "0");
                jsonObj.put("windowsNum", "0");
                jsonObj.put("unixNum", "0");
                jsonObj.put("netEquipmentNum", "0");
                jsonObj.put("databaseNum", "0");
                jsonObj.put("appResourceNum", "0");
                jsonObj.put("otherNum", "0");
                retVal.put("resNumTotalInfoReport", jsonObj);
            }
            retVal.put("pageInfo", paegInfoJSON);
            retVal.put("data", dataJSON);
           
            // add err msg
            if (!StrUtil.isNullStr(this.getErrMsg())) {
                retVal.put("exception", this.getErrMsg());
            }

            logger.debug("retValue:" + retVal.toString());
        } catch (Exception e) {
            e.printStackTrace();
            try {
                retVal.put("exception", e.getMessage());
            } catch (Exception ex) {
                ex.printStackTrace();
            }
        }

        return retVal.toString();
 }

    public String getErrMsg() {
        return errMsg;
    }

    public void setErrMsg(String errMsg) {
        this.errMsg = errMsg;
    }
}

 

8.上面的步骤就是使用gt-grid组件的方法，当然对于不同架构的系统，使用gt-grid是不同的，需要自己去琢磨。