精华内容
下载资源
问答
  • Qt数据列表展示
    千次阅读
    2019-04-21 06:24:00

    Qt数据列表展示

    Qt中使用QListWidgetableWidgetQTreeWidget(只考虑最大3)自定义子widget来展示数据的时候,通常子widget的个数达到了上千加载展示就会很慢,而且很耗内存。原因是new出来的widget太多了。下面的解决方案希望能帮助你。

    原理:

    其实一个列表展示给用户看的高度是很有限的不会超过一个屏幕的高度,而这个高度只需要很少的子widget就可以填充满,所以,当你有1万个数据要展示时,并不需要每个数据都new一个widget(自定义的)来展示,你只需要new显示出来的那几个widget,当滚动条滚动的时候将超出屏幕的widget隐藏起来,将要新展示的数据重用隐藏的widget来展示而不需要new新的widget,只有当widget个数不足以覆盖列表显示的区域时才new新的(最多也就覆盖一个屏幕需要的个数)

    组件组成

    1. 一个父widget,容纳子widget和滚动条;
    2. widget使用move方法填充满展示区域;
    3. 滚动条加载更多内容。

    基本方法

    1. showEvent里面刷新要展示的数据到widget
    2. resizeEvent会改变展示区域的大小,需重新刷新数据到widget使其新的区域能完全被widget展示;
    3. wheelEvent需要改变滚动条当前值;
    4. 连接QScrollBar::valueChanged事件,当事件发生时要将新的数据展示到widget上。

    怎样重用子widget

    QList<ItemWidget*> m_widgets;

    m_widgets来缓存所有创建出来的子widget,当需要新widget的时候看缓存里是否有隐藏的,如果有就拿出来进行新数据的展示,如果没有就根据数据的类型来创建新的widget

    ItemWidget *TreeWidget::getWidget(const ItemInfo &info)

    {

        // 存在这种类型的widget,并且没有被使用(不可见)直接返回

        ItemWidget *widget = nullptr;

        for (int i=0; i<m_widgets.size(); i++) {

            if (m_widgets[i]->data().type == info.type && !m_widgets[i]->isVisible()) {

                widget = m_widgets[i];

                break;

            }

        }

     

        if (widget == nullptr) {

            if (info.type == Top) {

                widget = new TopWidget(this);

            } else if (info.type == Parent) {

                widget = new ParentWidget(this);

            } else if (info.type == Child) {

                widget = new ChildWidget(this);

            } else {

                Q_ASSERT(0);

            }

            connect(widget, &ItemWidget::sigMousePress, [this, widget]() {

                if (widget->data().type != Child) {

                    ItemInfo newInfo = widget->data();

                    newInfo.isExpand = !newInfo.isExpand;

                    updateItemInfo(newInfo);

                    refreshWidgets();

                } else {

                    gotoSelected(widget->data().id);

                }

                emit sigItemMousePress(widget->data());

            });

            connect(widget, &ItemWidget::sigMouseDoubleClick, [this, widget]() {

                emit sigItemMouseDoubleClick(widget->data());

            });

            m_widgets.append(widget);

        }

     

        widget->setData(info);

        // 如果是当前选中的widget

        if (widget->data().type == Child) {

            widget->setSelected(widget->data().id == m_curChildId);

        }

        widget->resize(this->width(), widget->height());

        widget->show();

        return widget;

    }

    重点是刷新数据到widget上

    首先,将所有可见widget隐藏起来,遍历所有数据,y轴从0开始每次增加遍历数据展示时需要的高度,y值大于滚动条值并且小于组件高度时就需要将子widget展示出来。

    组件高度就是滚动条page step值。

    滚动条mininum0maxinumy – pageStep

    公式:document length = maxinum() - minimum() + pageStep()

    void TreeWidget::refreshWidgets()

    {

        for (int i=0; i<m_widgets.size(); i++) {

            m_widgets[i]->resize(this->width(), m_widgets[i]->height());

            m_widgets[i]->hide();

        }

     

        auto moveItem = [this](const ItemInfo &item, int &y, int &startPos, bool &isContinue) {

            if (y >= m_scrollbar->value() && isContinue) {

                getWidget(item)->move(0, startPos);

                startPos += item.height;

                isContinue = startPos < this->height();

            }

            y += item.height;

        };

     

        int y = 0, startPos = 0;

        bool isContinue = true;

        for (int i=0; i<m_list.count(); i++) {

            const ItemInfo &topItem = m_list[i];

            moveItem(topItem, y, startPos, isContinue);

            if (topItem.childList.count() > 0 && topItem.isExpand) {

                for (int j=0; j<topItem.childList.count(); j++) {

                    const ItemInfo &parentItem = topItem.childList[j];

                    moveItem(parentItem, y, startPos, isContinue);

                    if (parentItem.childList.count() > 0 && parentItem.isExpand) {

                        for (int k=0; k<parentItem.childList.count(); k++) {

                            const ItemInfo &childItem = parentItem.childList[k];

                            moveItem(childItem, y, startPos, isContinue);

                        }

                    }

                }

            }

        }

     

        qDebug() << "y:" << y << ", startPos:" << startPos << ", height:" << this->height();

        m_scrollbar->move(this->width() - m_scrollbar->width(), 0);

        m_scrollbar->resize(m_scrollbar->width(), this->height());

        m_scrollbar->setPageStep(this->height());

        if (y > startPos) {

            m_scrollbar->setMaximum(y - m_scrollbar->pageStep());

            m_scrollbar->show();

            m_scrollbar->raise();

        } else {

            m_scrollbar->setMaximum(0);

            m_scrollbar->setValue(0);

            m_scrollbar->hide();

        }

        qDebug() << "min:" << m_scrollbar->minimum() << ", max:" << m_scrollbar->maximum() << ", value:" << m_scrollbar->value();

    }

    结尾

    • 性能优化
    • 响应事件扩充
    • 代码中展示的元素有17000多个效率还是很高的
    • 代码中有三层也有两层,当然一层的话相信更简单
    • 红色item是最顶层
    • 绿色item是中间层
    • 白色item是最底层

    https://img-blog.csdn.net/20160804225858636

    更多相关内容
  • flutter 项目实战四 列表数据展示

    千次阅读 2019-03-28 14:59:21
    本项目借用 逛丢 网站的部分数据,仅作为 flutter 开发学习之用。 逛丢官方网址:https://guangdiu.com/ flutter windows开发环境设置 flutter 项目实战一 新建 flutter 项目 flutter 项目实战二 网络请求 ...

    本项目借用 逛丢 网站的部分数据,仅作为 flutter 开发学习之用。 逛丢官方网址:https://guangdiu.com/

    flutter windows开发环境设置

    flutter 项目实战一 新建 flutter 项目

    flutter 项目实战二 网络请求

    flutter 项目实战三 json数据解析以及Gson格式化flutter 项目实战二 网络请求

    flutter 项目实战四 列表数据展示

    flutter 项目实战五 item 点击跳转,webview加载

    flutter 项目实战六 drawer侧边栏

    flutter 项目实战七 bottomNavigationBar

    flutter 项目实战八 下拉刷新 上拉加载

    flutter 项目实战九 小时风云榜

    先放上 本人 使用 kotlin 开发的逛丢的页面,kotlin开发的源码以及相关说明将在其他部分给出。

    我们会按照此列表展示,但是UI会略有修改。

    appBar部分为一个 Image 与 title ,不用详细的分解。

    列表的Item 分解示意图如下

    说名一下,row是横向排列的控件,column是竖向排列的控件。container 可设置边框边距等属性。

    开始代码实现步骤。

    新建一个 home_index.dart文件

    class HomeIndex extends StatefulWidget{
      @override
      State<StatefulWidget> createState() {
        // TODO: implement createState
        return IndexWidget();
      }
    }
    
    class IndexWidget extends State<HomeIndex>{
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return null;
      }
      
    }

    flutter 页面新建的时候可以选择继承  StatefulWidget 以及 StatelessWidget,StatelessWidget是无状态值得,即不可使用setState更新变量,我们需要在获取数据之后来刷新页面加载数据,所以我们使用 StatefulWidget .然后修改 main() 中的代码加载HomeIndex.

    此时 IndexWidget 的 build方法返回的还是空值,先完成appBar 部分,修改代码

    class IndexWidget extends State<HomeIndex>{
    
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return Scaffold(
            appBar: AppBar(
              title: Text("首页",style: TextStyle(color: Colors.white),),
              leading: Icon(Icons.menu,color: Colors.white,),
              backgroundColor: Colors.green[500],
            ),
            body: Text("列表数据等待设计"),
        );
      }
    
    }

    运行代码

    flutter中的所有的控件都是基于 Widget 所有可以使用 各widget 组合出各种效果。上面的appBar 中控件排列方式如下图(actions未展示),大概的位置如下图所示(请忽略图的美丑,示意即可)

    下面按照之前的 item 分析设计列表数据。flutter中列表数据使用 ListView.builder 创建。

    首先item用container包裹,里面是一个横向排列的Row控件,Row有两个子widget ,左边一个 image,右边一个 column ,column又分为两部分,上面一个Text,下面又是一个Row,而此Row又包含一个靠左显示的Text,以及靠右的有两个子Text的Row.分析完了,开始代码。

    根据梳理好的结构关系,编写代码如下

    class IndexWidget extends State<HomeIndex>{
    
      List<RstData> _listData;//设置列表数据
    
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return Scaffold(
            appBar: AppBar(
              title: Text("首页",style: TextStyle(color: Colors.white),),
              leading: Icon(Icons.menu,color: Colors.white,),
              backgroundColor: Colors.green[500],
            ),
            body: _listInfos(),
        );
      }
    
      //list列表
      Widget _listInfos(){
        return ListView.builder(
            itemCount: 3,//此处展示需要写成此形式,实际适用时  _listData==null?0:_listData.length
            itemBuilder: (content,index){
               return _listItem(null);
            }
        );
      }
      //list列表的item
      Widget _listItem(RstData rstdata){
        return Container(
          height: 110,//设置item的高度
          padding: EdgeInsets.all(5),//设置item的边距
          child: Row(
            children: <Widget>[
              Container(
                height: 100,
                margin: EdgeInsets.all(5),//设置图片的边距
                child: Image.network("https://l.guangdiu.com/29ddbc1dc1e151a2311604744f54510b.jpg?imageView2/2/w/224/h/224/format/jpg"),
              ),//涉及到widget的大小或者边框的时候,使用container包裹
              Container(
                width: MediaQuery.of(context).size.width-120,
                child: Column(
                  children: <Widget>[
                    Text("拼多多 Apple 苹果 新iPad Air 10.5 英寸平板电脑 WLAN版 64GB 3749元包邮(直降250元)"),
                    Expanded( //此处使用expanded 填充,然后设置container 的对其方式确保 在底部显示
                      child:  Row(
                        children: <Widget>[
                          Container(
                            alignment: Alignment.bottomLeft,//设置container的对其方式
                            child: Text("天猫",style: TextStyle(color: Colors.green[500]),),
                          ),
                          Expanded(
                            child: Container(
                              alignment: Alignment.bottomRight,//设置container的对其方式
                              child: Row(
                                mainAxisAlignment: MainAxisAlignment.end,//设置ROW的对其显示方式
                                children: <Widget>[
                                  Text("3分钟前-",style: TextStyle(color: Colors.green[500]),),
                                  Text("今日值得买",style: TextStyle(color: Colors.green[500]),),
                                ],
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),//expanded类似于Android View的layout_weight属性按照比例填充,flex: 为1 时可以不填写此属性
                  ],
                ),
              ),
            ],
          ),
        );
      }
    
    }

    因为边界问题所以当widget需要设置宽高,对其方式等属性是,我们用container进行包裹,当控件需要占用一个不固定的空间时,我们用expanded 包裹,达到类似于 Android View的layout_weight的使用效果。

    运行示例,app截图

    基本样式已完成,下面的步骤是使用网络数据填充,并且给item添加一个框框

    修改后的代码为

    class IndexWidget extends State<HomeIndex>{
    
      List<RstData> _listData;//设置列表数据
    
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return Scaffold(
            appBar: AppBar(
              title: Text("首页",style: TextStyle(color: Colors.white),),
              leading: Icon(Icons.menu,color: Colors.white,),
              backgroundColor: Colors.green[500],
            ),
            body: _listInfos(),
        );
      }
    
      //list列表
      Widget _listInfos(){
        return ListView.builder(
            itemCount: _listData==null?0:_listData.length,//此处展示需要写成 3,实际适用时  _listData==null?0:_listData.length
            itemBuilder: (content,index){
               return _listItem(_listData[index]);
            }
        );
      }
      //list列表的item
      Widget _listItem(RstData rstdata){
        return Container(
          height: 110,//设置item的高度
          margin: EdgeInsets.only(left: 5,right: 5,top: 5),//设置item的边距
          decoration: BoxDecoration(
            border: Border.all(color: Colors.black54,width: 1),//设置边框的宽度 以及 颜色
            borderRadius: BorderRadius.all(Radius.circular(5)),//设置圆角
          ),
          child: Row(
            children: <Widget>[
              Container(
                height: 100,
                margin: EdgeInsets.all(5),//设置图片的边距
                child: Image.network(rstdata.image),
              ),//涉及到widget的大小或者边框的时候,使用container包裹
              Expanded(
                child: Container(
                  margin: EdgeInsets.only(right: 5),
                  child: Column(
                    children: <Widget>[
                      Text(rstdata.title),
                      Expanded( //此处使用expanded 填充,然后设置container 的对其方式确保 在底部显示
                        child:  Row(
                          children: <Widget>[
                            Container(
                              alignment: Alignment.bottomLeft,//设置container的对其方式
                              child: Text(rstdata.mall,style: TextStyle(color: Colors.green[500]),),
                            ),
                            Expanded(
                              child: Container(
                                alignment: Alignment.bottomRight,//设置container的对其方式
                                child: Row(
                                  mainAxisAlignment: MainAxisAlignment.end,//设置ROW的对其显示方式
                                  children: <Widget>[
                                    Text("${rstdata.pubtime}-",style: TextStyle(color: Colors.green[500],fontSize: 10),),
                                    Text(rstdata.fromsite,style: TextStyle(color: Colors.green[500],fontSize: 10),),
                                  ],
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),//expanded类似于Android View的layout_weight属性按照比例填充,flex: 为1 时可以不填写此属性
                    ],
                  ),
                ),
              ),
            ],
          ),
        );
      }
    
      @override
      void initState() {
        // TODO: implement initState
        super.initState();
        //项目加载时去获取数据
        _getGuangdiuIndexData();
      }
    
      void _getGuangdiuIndexData() async{
        String url="getlist.php";
        FormData formData=FormData();
        formData.add("markid", "5685521");
        Response resp=await HttpUtil().post(url,data: formData).then((resp){
          RespResult respResult=RespResult.fromJson(resp.data);
          setState(() {
            _listData=respResult.data;
          });
        });
      }
    }

    此处在 initState 中获取数据,所有不用热加载更新,否则看不到数据。重新运行项目等到数据列表

    此为数据的展示样式

    码云 git 下载

    展开全文
  • Vue+elementUI 动态展示列表数据

    千次阅读 2021-03-09 13:13:31
    需求描述:活动查看的时候,根据后台返回的数据,动态渲染列和每行数据。 后台返回的数据结构如下 html <!-- 弹出的查看数据 --> <el-dialog width="1200px" :title="activityName" :...

    需求描述:活动查看的时候,根据后台返回的数据,动态渲染列和每行数据。

    后台返回的数据结构如下

    html

        <!-- 弹出的查看数据 -->
        <el-dialog
          width="1200px"
          :title="activityName"
          :visible.sync="viewDataPopUp"
        >
          <div class="export">
            <el-button type="primary" @click="exportData">导出数据</el-button>
          </div>
    
          <el-table border style="width: 100%" :data="resultTable" id="table">
            <!-- 循环问题与答案 -->
            <el-table-column
              :label="item.label"
              :prop="item.prop"
              v-for="(item, key) in result"
              :key="key"
            >
            </el-table-column>
          </el-table>
        </el-dialog>

    data定义需要用到的字段

          activitySettingPopUp: false, //活动设置弹窗
          activityData: [], //查看活动数据
          // answer: [],
          // tableAnswer: [],
          resultTable: [], //查看数据处理后的数据
          result: [], //查看数据用于循环的数据
          activityName: "", //查看数据的活动名称

     

    调接口,成功后,将data.answers的值赋值给activityData.

            if (res.status_code === 200) {
                console.log(res);
                this.activityName = res.data.active_name;
                this.activityData = res.data.answers;
    
                this.result = this.getCol(this.activityData);
                this.resultTable = this.getTable(this.activityData);
              }

    getCol方法获取需要循环的列label和值prop

        getCol(src) {
          let col = [];
          // for (let i = 0; i < src.length; i++) {
          for (let j in src[0]) {
            if (j === "answer") {
              let str = src[0][j];
              let str2obj = JSON.parse(str);
              for (let k in str2obj) {
                col.push({
                  prop: k,
                  label: str2obj[k]["title"],
                });
              }
            } else {
              col.push({
                prop: j,
                label: src[0][j].title,
              });
            }
          }
          // }
          return col;
        },
    
    

    获取表格的数据

        getTable(src) {
          let table = [];
          for (let i = 0; i < src.length; i++) {
            let temp = {};
            for (let j in src[i]) {
              if (j == "answer") {
                let obj = JSON.parse(src[i][j]);
                for (let k in obj) {
                  temp[k] = obj[k].value;
                }
              } else {
                temp[j] = src[i][j].value;
              }
            }
            table.push(temp);
          }
          return table;
        },


     

    展开全文
  • 自定义安卓实现数据分页功能1、分页实现原理2、基于tableView实现的数据展示。3、具体实现效果展示: 最近基于客户要求做了个手持安卓端的软件,主要是用于数据和相关信息的查看功能。开始由于数据较少,查看的数据...

    • 最近基于客户要求做了个手持安卓端的软件,主要是用于数据和相关信息的查看功能。开始由于数据较少,查看的数据都是用的滚屏展示的,后来因为数据量大、经常要加载很久。所以要求实现分页。
      在这里插入图片描述

    1、分页实现原理

    • 博主在网上看了比较多的分页模板、大致套路总结有两个思路:

    • (1)一步到位、一次性返回所有数据:将数据在后台封装好、类似于前端数据展示一样、用PageInfo进行封装数据,然后返回到前端。安卓端也相当于是一个前端,此方法相当于一步到位、一次请求返回所有数据,剩下的数据解析翻页啥就交给安卓端搞定了。

    • (2)单独请求每页数据、实时更新:后台编写个获取数据的接口。通过安卓端每次点击下一页发送一个http请求、携带页数参数。对应返回相应页数的一部分数据。相当于每次翻页都会单独发送请求返回数据。个人觉得对于数据实时增删要求较高切服务器压力不大可选用此类方法。

    • 由于博主主要只需展示数据、未用到增删,考虑到每次分页都发请求可能会增加服务器压力,那就选用一次性到位的方法吧。而且分页展示用的是自定义的TableView,所以一切都是自己写的。以下是我自己写的一个分页demo、可能不套用、仅供提供思路参考!看看我的效果图吧、非专业UI界面有点丑、哈哈
      在这里插入图片描述

    2、基于tableView实现的数据展示。

    • 自定义的TableView:
    public class TableView extends HorizontalScrollView {
    }
       
      //此处省略一万字,完整版请点最底下链接! 因为都是自定义的!仅提供思路!如想copy博主界面demo的可点最下方链接下载!
    
    • 自定义分页插件: 后台直接返回的是JSONArray,此工具类作用就是解析后台返回的数据,定义一个pageBean封装每页的数据。下面写了三种数据格式、分别是List<String[]> 、 JSONArray、 List 。可根据自己需求增改!
      PageUtils
     public class PageUtils {
        private JSONArray currentJsonArray;
        private List<String[]> stringList;
    
        public void setData(JSONArray currentJsonArray, List<String[]> stringList){
            this.currentJsonArray = currentJsonArray;
            this.stringList = stringList;
        }
    
        public static PageBean getPageData(JSONArray currentJsonArray, int pageMax){
            if(null == currentJsonArray || 0 == currentJsonArray.size()){
                return null;
            }
            int everyPageLimit = pageMax -1;
            PageBean pageData =  new PageBean();
            int cort = currentJsonArray.size() % everyPageLimit;
            int sort = currentJsonArray.size() / everyPageLimit;
            int pages = cort == 0 ? sort:sort+1;
            pageData.setPages(pages); //总页数
            HashMap<Integer, List<Object>> jsonPage = new HashMap<>();
            for(int i=0; i<pages; i++){
                List<Object> json = new LinkedList<>();
                if((i + 1)* everyPageLimit > currentJsonArray.size()){
                    json = currentJsonArray.subList(i * (everyPageLimit), currentJsonArray.size());
                }else{
                    json = currentJsonArray.subList(i * (everyPageLimit), ((i + 1)* (everyPageLimit)));
                }
                jsonPage.put(i+1, json);
            }
            pageData.setJsonPage(jsonPage);
            return pageData;
        }
        public static PageBean getPageArrayData(List<HashMap> currentJsonArray, int pageMax){
            if(null == currentJsonArray || 0 == currentJsonArray.size()){
                return null;
            }
            PageBean pageData =  new PageBean();
            int everyPageLimit = pageMax - 1;
            int cort = currentJsonArray.size() % everyPageLimit;
            int sort = currentJsonArray.size() / everyPageLimit;
            int pages = cort == 0 ? sort:sort+1;
            pageData.setPages(pages); //总页数
            HashMap<Integer, List<HashMap>> jsonPage = new HashMap<>();
            for(int i=0; i<pages; i++){
                List<HashMap> json = new LinkedList<>();
                if((i + 1)* everyPageLimit >= currentJsonArray.size()){
                    json = currentJsonArray.subList(i * (everyPageLimit), currentJsonArray.size());
                }else{
                    json = currentJsonArray.subList(i * (everyPageLimit), ((i + 1)* (everyPageLimit)));
                }
                jsonPage.put(i+1, json);
            }
            pageData.setMapPage(jsonPage);
            return pageData;
        }
        public static PageBean getPageData(List<String[]> currentJsonArray, int pageMax){
            if(null == currentJsonArray || 0 == currentJsonArray.size()){
                return null;
            }
            int everyPageLimit = pageMax -1;
            PageBean pageData =  new PageBean();
            int cort = currentJsonArray.size() % everyPageLimit;
            int sort = currentJsonArray.size() / everyPageLimit;
            int pages = cort == 0 ? sort:sort+1;
            pageData.setPages(pages); //总页数
            HashMap<Integer, List<String[]>> jsonPage = new HashMap<>();
            for(int i=0; i<pages; i++){
                List<String[]> json = new LinkedList<>();
                if((i + 1)* everyPageLimit >= currentJsonArray.size()){
                    json = currentJsonArray.subList(i * (everyPageLimit), currentJsonArray.size());
                }else{
                    json = currentJsonArray.subList(i * (everyPageLimit), ((i + 1)* (everyPageLimit)));
                }
                jsonPage.put(i+1, json);
            }
            pageData.setStringPage(jsonPage);
            return pageData;
        }
    
    }
    
    

    Pagebean

    public class PageBean {
    
        private int pages;   //当前页数
    	//当前页的数据
        private HashMap<Integer, List<String[]>> stringPage ;
    
        private HashMap<Integer, List<Object>> jsonPage ;
    
        private HashMap<Integer, List<HashMap>> mapPage ;
    
        public HashMap<Integer, List<HashMap>> getMapPage() {
            return mapPage;
        }
    
        public void setMapPage(HashMap<Integer, List<HashMap>> mapPage) {
            this.mapPage = mapPage;
        }
    
        public int getPages() {
            return pages;
        }
    
        public void setPages(int pages) {
            this.pages = pages;
        }
    
        public HashMap<Integer, List<String[]>> getStringPage() {
            return stringPage;
        }
    
        public void setStringPage(HashMap<Integer, List<String[]>> stringPage) {
            this.stringPage = stringPage;
        }
    
        public HashMap<Integer, List<Object>> getJsonPage() {
            return jsonPage;
        }
    
        public void setJsonPage(HashMap<Integer, List<Object>> jsonPage) {
            this.jsonPage = jsonPage;
        }
    }
    

    3、具体实现效果展示:

    public class AreaCtrlDetailActivity extends Activity {
        private JSONArray resultJson ;
        private boolean flag = false;
        private TextView title;
        private String areaType;
        private String deptId;
        String[] dataP ;
        HashMap<String, JSONObject> allAreaRollCallMap = new HashMap<>();
        private LinearLayout tableLayout;
        PageBean pageData = new PageBean();
        private int curPage = 1;
        int maxPage = 1;
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
            setContentView(R.layout.demo_detail_list);
            tableLayout = findViewById(R.id.tableBody);
            getActionBar().show();
            getActionBar().setBackgroundDrawable(ContextCompat.getDrawable(getApplicationContext(), R.drawable.bg));
            getActionBar().setTitle("区域详情");
            dataP = getIntent().getStringArrayExtra("rowData");
            areaType = getIntent().getStringExtra(Constants.Param.AREA_TYPE);
            deptId = getIntent().getStringExtra(Constants.Param.DEPT_ID);
            freshPanel();
            initTableView();
        }
    
        private void freshPanel() {
            new Thread(new Runnable() {
                @Override
                public void run() {
                    getGlobalData();
                }
            }).start();
        }
    
        private synchronized  void initTableView() {
            if (!flag){
                try {
                    wait();
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
            }
            if(null != pageData) {
                refreshPanel(pageData.getJsonPage().get(curPage));
                maxPage = pageData.getPages();
            }else{
                CommonCode.showMessage(AreaCtrlDetailActivity.this, "未查询到数据");
                finish();
            }
        }
        public void onQueryAddPageButtonClicked(View v){
            if(curPage >= maxPage){
                CommonCode.showMessage(AreaCtrlDetailActivity.this, "已到最后一页");
            }else{
                curPage++;
                runOnUiThread(()->refreshPanel(pageData.getJsonPage().get(curPage)));
            }
        }
        public void onQueryReducePageButtonClicked(View v){
            if(curPage == 1){
                CommonCode.showMessage(AreaCtrlDetailActivity.this, "已到首页");
            }else{
                curPage --;
                runOnUiThread(()->refreshPanel(pageData.getJsonPage().get(curPage)));
            }
        }
        void refreshPanel(List<Object> cpData){
            TableView2 tv = (TableView2) findViewById(R.id.tableView);
            tv.clearData();
            tv.setHeaderBackColor(R.color.md_blue_300);
            tv.setHeaderNames("姓名", "状态", "部门", "编号", "详情","id");
            //设置每格的宽度
            tv.setColumnWidth(0, 105);
            tv.setColumnWidth(1, 80);
            tv.setColumnWidth(2, 170);
            tv.setColumnWidth(3, 180);
            tv.setColumnWidth(4, 100);
            if(null == cpData || 0 == cpData.size()){
                runOnUiThread(() -> Toast.makeText(AreaCtrlDetailActivity.this, "当前区域无数据!", Toast.LENGTH_SHORT).show());
                finish();
            }
            for (int i = 0; i < cpData.size(); i++) {
                JSONObject rowData = (JSONObject) cpData.get(i);
                allAreaRollCallMap.put(rowData.getString(Constants.Param.PERSON_INFO_ID), rowData);
                String detail = "详情";
                String io = rowData.getString(Constants.Param.IO_TYPE).equals(Constants.Common.IN) ?Constants.Common.E_IN : Constants.Common.E_OUT;
                String[] ss = { rowData.getString(Constants.Param.PERSON_INFO_NAME),io, rowData.getString(Constants.Param.DEPT_NAME),
                        rowData.getString(Constants.Param.PERSONNEL_NUMBER), detail, rowData.getString(Constants.Param.PERSON_INFO_ID)};
                Log.d("success", Arrays.toString(ss));
                tv.addRowData(i, ss);
            }
            tv.setOnItemClickListener(new TableView2.OnTableItemClickListener() {
                @Override
                public void onItemClick(int position, String[] rowData) {
                    Toast toast=Toast.makeText(AreaCtrlDetailActivity.this,rowData[position]+"的详情信息",Toast.LENGTH_SHORT    );
                    toast.setGravity(Gravity.CENTER, 0, 0);
                    toast.show();
                }
            });
            tv.setOnItemLongClickListener(new TableView2.OnTableItemLongClickListener() {
                @Override
                public void onItemLongClick(int position, String[] rowData) {
                }
            });
            tv.setOnUnitClickListener(new TableView2.OnUnitClickListener() {
                @Override
                public void onUnitClick(int row, int column, String unitText) {
                    if(!"all".equals(unitText)){
                        Intent intent = new Intent(AreaCtrlDetailActivity.this, AreaCtrlPersonInfoDetailActivity.class);
                        String[] data = tv.getRowData(row);
                        intent.putExtra("rowData", data);
                        intent.putExtra("areaType", dataP[1]);
                        intent.putExtra(Constants.Param.PERSON_ID, unitText);
                        intent.putExtra("dataDetail", allAreaRollCallMap.get(unitText));
                        startActivity(intent);
                    }
                }
            });
            tv.setEventMode(TableView2.MODE_EITHER_UNIT_EVENT); //自定义某些列的单元格处理事件
            tv.setColumnEventIndex(4);//设置哪些列的单元格处理事件
            tv.setUnitSelectable(false);//单元格处理事件的时候是否可以选中
            tv.setUnitDownColor(R.color.md_blue_900);//单元格处理事件的时候,按下态的颜色
            tableLayout.removeAllViews();
            tableLayout.addView(tv);
        }
    
        public void onQueryCancelButtonClicked(View v){
            finish();
        }
    
        //这是后台数据获取、设置个锁、如果数据未获取到、让界面绘制的线程等一下。加载完在唤醒!
        private synchronized void getGlobalData(){
            JSONObject param = new JSONObject();
           //传递的参数
            param.put(Constants.Param.AREA_TYPE, areaType);
            param.put(Constants.Param.DEPT_ID, deptId);
            param.put(Constants.Param.CATEGORY, Constants.Category.PRISON);
            String url = CommonCode.getPortalUrl(Constants.Portal.HANDLE_CLIENT_GET_AREA_CTRL_DETAIL);
            JSONObject result = CommonCode.postGetJson(param,url);
            if (CommonCode.getResultFlag(result)) {
           		 //成功返回数据并用分页封装!
                resultJson = (JSONArray) CommonCode.getResultMapProperty(result, Constants.Param.DATA_LIST);
                pageData = PageUtils.getPageData(resultJson, 17);
            }else{
                runOnUiThread(() -> Toast.makeText(AreaCtrlDetailActivity.this, result.getString("message"), Toast.LENGTH_SHORT).show());
            }
            flag = true;
            notify();
        }
    }
    
    

    布局文件

    <?xml version="1.0" encoding="utf-8"?>
    <androidx.constraintlayout.widget.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <HorizontalScrollView
            android:id="@+id/scroll_data_lay"
            android:layout_width="0dp"
            android:layout_height="460dp"
            android:layout_marginTop="10dp"
            android:scrollbarDefaultDelayBeforeFade="400"
            android:scrollbarSize="4dp"
            android:scrollbars="vertical"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">
    
            <LinearLayout
                android:id="@+id/tableBody"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical"
                app:layout_constraintTop_toBottomOf="@id/textView18"
                tools:layout_editor_absoluteY="134dp">
    
                <com.neurotec.samples.multibiometric.util.TableView2
                    android:id="@+id/tableView"
                    android:layout_width="317dp"
                    android:layout_height="460dp"
                    android:layout_marginLeft="1dp"
                    app:headerTextColor="#000000"
                    app:headerTextSize="10sp" />
            </LinearLayout>
        </HorizontalScrollView>
    
        <LinearLayout
            android:id="@+id/bottomButtonsLinearLayout"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="10dp"
            android:orientation="horizontal"
            android:paddingTop="10dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/linearLayout">
    
            <Button
                android:id="@+id/pageReduce"
                android:layout_width="0dp"
                android:layout_height="30dp"
                android:layout_marginRight="5dp"
                android:layout_weight="1"
                android:background="@color/md_light_blue_400"
                android:gravity="center"
                android:onClick="onQueryReducePageButtonClicked"
                android:text="上一页"
                android:textColor="#FFFFFF" />
            <Button
                android:id="@+id/pageAdd"
                android:layout_width="0dp"
                android:layout_height="30dp"
                android:layout_marginRight="5dp"
                android:layout_weight="1"
                android:background="@color/md_light_blue_400"
                android:gravity="center"
                android:onClick="onQueryAddPageButtonClicked"
                android:text="下一页"
                android:textColor="#FFFFFF" />
    
    
            <Button
                android:id="@+id/cancel"
                android:layout_width="0dp"
                android:layout_height="30dp"
                android:layout_marginLeft="5dp"
                android:layout_weight="1"
                android:background="#78909C"
                android:gravity="center"
                android:onClick="onQueryCancelButtonClicked"
                android:text="返   回"
                android:textColor="#FFFFFF" />
    
        </LinearLayout>
    
    
    </androidx.constraintlayout.widget.ConstraintLayout>
    
    • 注:博主的代码未考虑到界面界面适配。因为公司产品用的定制设备不需要多型号界面适配,界面适配暂未有深层次研究,所以布局文件代码仅供参考、未通用!

    • 一直不务正业的野鸡Java后端开发!如有错误、还望指正!如果对你有启发,记得点个赞哈!手动滑稽!谢谢!

    刚才说到的TableView控件!下载地址 传送门

    展开全文
  • Vue实战:获取数据列表展示

    万次阅读 2019-02-25 14:59:35
    这个例子从 Github 的 API 中获取了最新的 Vue.js 提交数据,并且以列表形式将它们展示了出来。你可以轻松地切换 master 和 dev 分支。 一、展示 二、源码 &lt;!DOCTYPE html&gt; &lt;html lang="...
  • 需求分析(长列表展示) 页面某处需要渲染 1w+ 条数据,并需要滚动展示,这时如果直接把这些数据渲染到页面上,会导致系统内存大量被占用,导致页面卡顿或崩溃 我们都知道,每次 DOM 修改,浏览器都会重新计算元素...
  • 这样进行简单的数据展示是可以的,如何要加入其它功能则有一些问题。&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&...
  • vue input输入框关键字筛选检索列表数据展示

    万次阅读 多人点赞 2019-01-24 17:43:13
    想必大家在项目开发中难免会用到关键字筛选的功能,正好这次项目有需求要做这一块,就整理一下vue的input输入框输入关键字检索数据列表的代码。下面直接上代码: html: &lt;!-- 筛选demo --&gt; &lt...
  • vue列表类型数据展示图片

    千次阅读 2018-07-13 15:54:15
    方式一:&lt;el-table-column type="expand"&gt; &lt;template slot-scope="props"&gt; &lt;el-form label-position="left" class="...el-form-item
  • Vue通过接口获取数据列表展示

    千次阅读 2020-04-23 10:42:25
    --vue-resource--> <script src="https://cdn.bootcss.com/vue-resource/1.3.4/vue-resource.js"></script> 2、列表 <div id="app"> <table class="table table-bordered table-hover table-striped"> <thead> ...
  • Android 数据列表展示UI框架

    千次阅读 2018-10-29 09:51:29
    Android 收集好用的库与UI效果demo索引​​​​​​​ 1.悬停列表 CityPicker github https://github.com/zaaach/CityPicker
  • VUE:实现模块分类展示数据列表

    千次阅读 2020-03-26 10:55:23
    项目中,会有一个模块展示多个类别的数据,点某一个标题只展示相关的内容。 具体实现 <template> <div> <div class="classifyToolBox"> <div class="flexRowStart classifyToolBar"> &...
  • EasyUI之datagrid展示数据列表

    万次阅读 多人点赞 2018-05-04 01:39:48
    写在最前: 如果你用惯了Web Mvc框架的视图跳转方式来开发后台系统,第一次接触到EasyUI的时候,往往会...博主就是如此:在写完一个增删改查之后,才发现EasyUI越学越有意思,页面都是靠局部刷新来动态展示数据,这...
  • 如下图,将后台数据库中的用户列表数据展示出来,点击某用户后,进入信息详情页面 解决方案: 涉及知识点:模板语言 django除了可以渲染html语言,还支持模板语言: {% for user in user_list %} <li>...
  • 6-5 vue展示商品列表数据

    千次阅读 2019-04-27 16:30:33
    结果有14个数据:     ------------ 查询结果总数: this.proNum = response.data.count;   排序: # ordering_fields = ('sold_num', 'add_time') ordering_fields = ('...
  • 小程序之 列表页的数据遍历展示

    千次阅读 2019-05-05 13:37:27
    // 返回 列表数据 $info=array( "guonei"=>$project ); if(empty($info)){ $data=array( "status"=>0, "message"=>"数据异常", ); $data=json_encode($data,true); } $this->ajaxReturn($info,'JSON'); ...
  • android的数据库操作和列表展示

    热门讨论 2013-09-24 23:09:14
    android的sqlite数据库操作和界面列表展示
  • antd table 树形数据列表展示

    千次阅读 2020-10-23 16:52:05
    项目要求列表需要数据能展开,所以用到antd 的树形数据展示 效果展示 部分代码 <Table columns={this.columns} rowSelection={{ checkStrictly: false,type:radio }} dataSource={dataSource} rowKey=...
  • 1,获取接口数据的时候,给每一条数据都新增一个showmore:false 变量 2,显隐展示,新增一个常量默认展示几条,判断showmore:false 展示几条,为true展示全部 3,点击每一项的时候,展示隐藏问题,使用this.$set()...
  • 获取后台数据展示在下拉框列表

    万次阅读 2018-03-23 15:46:50
    1首先 获取后台要展示数据 定义获取的地址 请求方式 2 将该方法引入 需要展示的页面3 获取信息4 获取到到信息字段名5 将划线部分的字段名绑定在要展示的下拉框中6 初始话 ...
  • 四、实现 TableView 列表数据展示 1、需要继承 UITableViewDataSource, UITableViewDelegate,继承之后可以通过提提示生成 列表长度设置、数据设置的代码 2、通过  var array:[String] 设置一些模拟数据 ...
  • Bootstrap Table获取并展示数据列表

    万次阅读 2017-11-28 11:23:05
    // cache: false, // 默认true 设置为 false 禁用 AJAX 数据缓存 contentType : "application/x-www-form-urlencoded", // 参数提交类型,默认以application/json提交 queryParams:function(params){ $(form...
  • 一.vue上传数据包含上传图片 ...列表展示数据  HTML代码如下 JS代码如下 参考 1.https://www.iviewui.com/components/form 2.vue中的 ref 和 $refs 3.iview   html代码如下:   &lt;templat...
  • Django页面显示数据列表

    千次阅读 2020-04-22 22:24:33
    Django页面显示数据列表 坑点: app 中返回的数据格式 模板页面中的循环 Views代码部分: 汽车列表 def carlists(request): conn = sqlite3.connect(‘db.sqlite3’) c = conn.execute(‘select * from carlist’)...
  • ASP.NET MVC 数据查询之展示列表

    千次阅读 2018-10-03 14:40:41
    我们尝试一下ASP.NET MVC项目中展示数据查询的结果,比如一个用户列表。 方法1:把每一个用户的数据存入一个用户类,然后集成一个用户类的LIST,然后循环展示。 第一步:写一个用户类,在数据库建立表并插入测试...
  • vue获取后台数据展示在下拉框列表-element

    万次阅读 多人点赞 2019-03-23 14:38:14
    第一个写好相关的下拉框的样式。然后为option添加赋值 ...在mounted中绑定函数,这一步最重要,然后在methods中写相关的方法,注意我这个是利用后台给的接口来写的,后台传输的数据将会在前台的下拉框中显示 ...
  • 近期,在完成一个含有索引列表功能的项目。效果如图所示: 首先,我用的是react native 所提供的 ListView 这个组件(由于这个组件已经过期,而且此列表为分组列表,所以建议大家使用react native 官网所提供的...
  • --第一级数据--> < view class = "flex-wrp workitemlist"> < view class = "flex-item"> < text class = 'content'> {{workitem.name}} text > < view class = "flex-item"> < ...
  • vue 实现分页数据展示

    千次阅读 2020-04-16 10:17:24
    效果如下: ...-- 对需要展示列表数据carList进行循环,实现多个数据信息展示,@click绑定点击事件,点击数据信息内容,触发两个函数 getCarDetailImg以及 Myopen函数,触发多个函数,使用";"分隔--&...
  • #vue使用el-table,实现动态数据表、并滚动展示 ###tableLabel表头数据,支持条数、宽度设置 ###tableData存放所有数据, ###showList存放用于展示数据, ###使用setInterval定时更新showList(删除第一条,末尾...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 390,704
精华内容 156,281
关键字:

列表数据展示是什么