easyui datagrid 显示省略号是哪个属性（easyUI 的datagrid字段如何中把一些显示的内容换成直观容易的理解的）

本文目录

• easyUI 的datagrid字段如何中把一些显示的内容换成直观容易的理解的
• 关于easyui的datagrid问题
• easyUI的表格如何显示数据库里的数据啊
• easyui datagrid 行操作处理问题如图：
• 菜鸟求教，java easyui 怎么用DataGrid 的属性queryParams给后台传参数，DataGrid的代码如下：
• jquery Easy UI怎么让datagrid显示+号

easyUI 的datagrid字段如何中把一些显示的内容换成直观容易的理解的

在定义field时，加上一个formatter属性。

{field:xxx,name:xxx,formatter:function(valur,row,index){    if(value==1){        return "YES";    }else{        return "NO";    }    //2 图片    if(value==1){        return "《img src=’yes.png’》";    }else{        return "《img src=’no.png’》";    }    //图片你自己提供}}

关于easyui的datagrid问题

{ field: ’checkbox’, title: ’《input id=\"listcheckbox\" type=\"checkbox\" title=\"全选/全不选\"》全选/全不选’, width: 70,align : ’center’,             formatter: function (value, rec, rowIndex) {                 return "《input type=\"checkbox\"  name=\"PL\" title=\"复选框\"  value=\"" + rec.ID + "," + rec.CUST_ID + "\" 》";             }         }

这是在列表加复选框；

$("#listcheckbox").unbind();             $("input").unbind().bind("click", function () {                 //总记录数                 var totolrows = $("input").length;                 //选中的记录数                 var checkrows = $("input:checked").length;                 //全选                 if (checkrows == totolrows) {                     $("#listcheckbox").attr("checked", ’checked’);                 }                 else {                     $("#listcheckbox").removeAttr("checked");                 }                                  $("#pllist").val("");                 var items = $("input:checked");                 var result = "";                 $.each(items, function (index, item) {                     result = result + "&" + item.value;                 });                 $("#pllist").val(result);             });             $("#listcheckbox").click(function () {                 if ($(this).attr(’checked’) == ’checked’) {                     $("input").attr("checked", ’checked’);                 } else {                     $("input").removeAttr("checked");                 }                 $("#pllist").val("");                 var items = $("input:checked");                 var result = "";                 $.each(items, function (index, item) {                     result = result + "&" + item.value;                 });                 $("#pllist").val(result);             });

这是onLoadSeccess中要加的。

easyUI的表格如何显示数据库里的数据啊

 因为EasyUI DataGrid只要取出后台传过来的一定格式的JSON数据，就可以在前台页面数据表格中，以一定形式显示数据库中的数据。此处，我们使用Struts2框架整合DataGrid，实现数据的显示。

一、页面内容

       为了在页面中显示数据库中字段内容，需要定义一个table，通过EasyUI内部设计，自动显示数据，如下：

《%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%》

《%@ taglib prefix="s" uri="/struts-tags" %》

《%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%》

《!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"》

《html》

  《head》

    《base href="《%=basePath%》"》

    《title》房产信息管理《/title》

***隐藏网址***

***隐藏网址***

***隐藏网址***

***隐藏网址***

***隐藏网址***

  《/head》

 《body》

 《table id="housesManage" style="height: 100%"》《/table》

 《div id="addHouse"》《/div》

 《div id="updateHouse"》《/div》

 《script type="text/javascript"》

    $(document).ready(function(){

     //datagrid设置

$(’#housesManage’).datagrid({

title:’房产列表’,      //表格标题

       iconCls:’icon-list’, //表格图标

nowrap: false,      //是否只显示一行，即文本过多是否省略部分。

striped: true,

fitColumns:true,    //防止水平滚动

scrollbarSize:0,    //去掉右侧滚动条列

url:"houses/showHouses!show", //action地址

idField:’id’,

collapsible:false,//是否可折叠的 

singleSelect:true,//只能单选

frozenColumns:[[

 {field:’ck’,checkbox:true}

]],

       pagination:true, //包含分页

pageSize: 10,

pageList: ,//可以设置每页记录条数的列表 

rownumbers:true,

singleSelect:true,//只能单选

columns :[[{

 field : ’id’,  

                  title : ’ID’,  

                  align:’center’,

                  hidden : true 

},{

  field : ’unitNum’,  

                   title : "楼栋号",  

                   width : 100,  

                   align:’center’, 

                   sortable : true,

},{

  field : ’doorCard’,  

                   title : "门牌号",  

                   width : 100,  

                   align:’center’, 

                   sortable : true,

},{

  field : ’roomArea’,  

                   title : "房屋面积(平米)",  

                   width : 100,  

                   align:’center’, 

                   sortable : true,

},{

  field : ’buildTime’,  

                   title : "建筑时间",  

                   width : 150,  

                   align:’center’,

                   sortable : true,

},{

  field : ’isUse’,  

                   title : "使用状态",  

                   width : 80,  

                   align:’center’, 

                   sortable : true,

                   formatter: function(value,row,index){

                     if(value=="0"){

                        return ’已使用’;

                     }else{

                       return ’《font color="red"》空置《/font》’;

                     } 

                  }

}]], 

toolbar:[{

text:’添加’,

iconCls:’icon-add’,

handler:function(){

       //显示上传界面

       $(’#addHouse’).dialog({    

   title: ’房产管理|添加房屋信息’,    

   width: 500,

   iconCls:’icon-add’,    

   height: 300,    

   closed: false,    

   cache: false,    

   href: ’houses/addHouse.jsp’,    

   modal: true   

});    

       }

}, ’-’, {

                text: "删除",

                iconCls: "icon-cut",

                handler: function () {

                    //选中要修改删除的行

                      var rows = $("#housesManage").datagrid(’getSelections’); //返回所有选中的行

                      if (rows.length 》 0) {//选中几行的话触发事件

                        $.messager.confirm("提示", "您确定要重置该用户密码吗？", function (res) {//提示是否删除

                            if (res) {

                               //获得编号

                               var id=rows.id;

                               // 获得删除行索引  

                               var tableindex = $("#housesManage").datagrid(’getRowIndex’, id);

                               $.post(’houses/delHouse!delete’,{

                                 "house.id":id

                                },function(data){

                                  if(data.message=="2"){

                                     $.messager.alert(’温馨提示’,’删除失败!’,’error’); 

                                  }else{

                                      //删除选中的行

                                      $("#housesManage").datagrid("deleteRow",tableindex);

                                  }

                               }); 

                            }

                        });

                    } 

                }

              },’-’,{

                  text: "修改",

                  iconCls: "icon-edit",

                  handler: function (){

                    //选中要修改删除的行

                      var rows = $("#housesManage").datagrid(’getSelections’); //返回所有选中的行

                      if (rows.length 》 0) {//选中几行的话触发事件

                       //获得编号

                       var id=rows.id;

                       //显示修改界面

       $(’#updateHouse’).dialog({    

   title: ’房产管理|修改房屋信息’,    

   width: 500,

   iconCls:’icon-edit’,    

   height: 300,    

   closed: false,    

   cache: false,    

   href: ’houses/getHouse!get?house.id=’+id,    

   modal: true   

});           

                  }

                }

              },’-’,{

                text: "刷新列表",

                iconCls: "icon-reload",

                handler: function (){

                    $("#housesManage").datagrid(’reload’);

                }

                }] ,onLoadError : function() {  

          $.messager.alert(’温馨提示’,’数据加载失败!’,’error’);  

    }

});

displayMsg();

});

   //改变分页显示

    function displayMsg() {  

        $(’#housesManage’).datagrid(’getPager’).pagination({  

        displayMsg : ’当前显示《font color="red"》 {from} - {to} 《/font》条记录   共 《font color="red"》{total}《/font》 条记录’  

   });  

} 

  《/script》

  《/body》

《/html》

二、struts.xml中配置

 《!-- 显示房产信息 --》

      《action name="showHouses" class="com.wy.action.HouseAction" method="show"》

         《result type="json" name="success"》

           《param name="root"》result《/param》

         《/result》

      《/action》

三、对应的Action 处理类

        private JSONObject result;       //返回的json  

private String rows;             //每页显示的记录数  

private String page;             //当前第几页 

        //显示房产基本信息

public String show(){

   //当前页  

   int intPage = Integer.parseInt((page == null || page == "0") ? "1":page);  

   //每页显示条数  

   int number = Integer.parseInt((rows == null || rows == "0") ? "10":rows); 

   //每页的开始记录  第一页为1  第二页为number +1   

   int start = (intPage-1)*number; 

   HouseDao houseDao=new HouseDao();

   ArrayList《THouse》 listHouses=houseDao.getHouses(start, number); //从数据库中查询数据

   Map《String, Object》 jsonMap = new HashMap《String, Object》();//定义map  

   int count=houseDao.getHouseCount(); //求出总记录数

   //total键 存放总记录数，必须的  

   jsonMap.put("total", count);

            jsonMap.put("rows", listHouses);//rows键 存放每页记录 list  

            result=JSONObject.fromObject(CommonUtil.getJsonNotNull(jsonMap));

           return SUCCESS;

}

 action 类中，rows，page 是用于EasyUI分页操作的，EasyUI会自动向后台传入参数：当前页及每页显示记录数，以此实现分页功能，此处只需要定义这两个变量即可。

{"total":5,"rows":}

五、效果截图

easyui datagrid 行操作处理问题如图：

我有个思路，可参考下：1. 给所有“正确”或“错误”按钮添加相同的class。//使用class做标记2. 你点某一行的“正确”或“错误”后，把这一行两个按钮的class 都改掉， 这样做 一来是修改了标记；二来时修改样式，让人家知道这一行我处理了，处理结果是什么。 // 例如 选择项高亮，对应项变暗3. 通过$(’.clazz’).size()获取clazz个数的值，如果为0表示都做了修改，否则对找到的class行做特殊处理。另外补充下：你可以考虑把class标记放在整行上，这样对第三步的操作方便些。

菜鸟求教，java easyui 怎么用DataGrid 的属性queryParams给后台传参数，DataGrid的代码如下：

你上面的dataGrid应该只是个本地的例子吧，没有和后台交互吧!因为我看你的url="mytable",感觉不像是action请求；因为你说的queryParams是需要发送远程请求时，才起作用的；

queryParams这个属性的作用其实就是在url的请求中添加额外的参数；

比如：url：“${ctx}/sys/user.action?name=‘小明’ ”，如果你想再附加一个参数age=18;

好比url：“${ctx}/sys/user.action?name=‘小明’&age=18 ”这样的url，这样的话，你就可以利用queryParams这个属性了；

在js中写一个方法

function addParam（）{

var param = {“age” :18};

$("#tt").datagrid("load", param);

}

这样就会重新去发送新的url请求，初始化datagrid新的数据了；（我这样的写法是动态的设置请求参数，如果你想直接在datagird初始化中添加参数，你就直接在初始化datagird的时候添加属性queryParams : {参数名:’参数值’,}）

jquery Easy UI怎么让datagrid显示+号

下面这个是EasyUi的拓展 你需要下载datagrid-detailview.js这个JS$(’#tt’).datagrid({ title:’DataGrid - DetailView’, width:500, height:250, remoteSort:false, singleSelect:true, nowrap:false, fitColumns:true, url:’datagrid_data.json’, columns:, view: detailview, detailFormatter: function(rowIndex, rowData){ return ’《table》《tr》’ + ’《td rowspan=2 style="border:0"》《img src="images/’ + rowData.itemid + ’.png" style="height:50px;"》《/td》’ + ’《td style="border:0"》’ + ’《p》Attribute: ’ + rowData.attr1 + ’《/p》’ + ’《p》Status: ’ + rowData.status + ’《/p》’ + ’《/td》’ + ’《/tr》《/table》’; } });