精华内容
下载资源
问答
  • 列表的分类
    千次阅读
    2018-11-22 14:55:05

    在这里插入图片描述

    1.主页面布局

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".fragment.LeftFragment"
        android:orientation="horizontal">
    
        <android.support.v7.widget.RecyclerView
            android:id="@+id/mRecyclerView"
            android:layout_width="0dp"
            android:layout_weight="3"
            android:layout_height="match_parent">
        </android.support.v7.widget.RecyclerView>
        <ScrollView
            android:id="@+id/mScrollView"
            android:layout_width="0dp"
            android:layout_weight="7"
            android:layout_height="match_parent">
            <LinearLayout
                android:id="@+id/mLinearLayout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical"
                android:paddingLeft="15dp"></LinearLayout>
        </ScrollView>
    
    
    </LinearLayout>
    

    2.左边页面的布局

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/title"
            android:text="666666"
            android:textSize="20sp"
            android:padding="15dp"/>
    
    </LinearLayout>
    

    3.右边页面的布局

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/image"
            android:src="@drawable/ic_launcher_background"
            android:layout_gravity="center_horizontal"/>
    
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/name"
            android:text="6666"
            android:textColor="#000"
            android:layout_marginTop="5dp"
            android:layout_gravity="center_horizontal"/>
    </LinearLayout>
    

    4.UtilsModel工具类M层(get.post两种)

    public class UtilsModel {
    
        private final Handler mHandler;
        public static UtilsModel sUtilsModel;
        private final OkHttpClient mMOkHttpClient;
    
        private UtilsModel(){
            mHandler = new Handler(Looper.getMainLooper());
            InterceptorModel interceptorModel = new InterceptorModel();
            mMOkHttpClient = new OkHttpClient.Builder()
                    .addInterceptor(interceptorModel)
                    .readTimeout(3000, TimeUnit.MILLISECONDS)
                    .writeTimeout(3000, TimeUnit.MILLISECONDS)
                    .readTimeout(3000, TimeUnit.MILLISECONDS)
                    .build();
        }
        public static UtilsModel getInstance(){
            if (sUtilsModel == null){
                synchronized (UtilsModel.class){
                    if (sUtilsModel == null){
                        return sUtilsModel = new UtilsModel();
                    }
                }
            }
            return sUtilsModel;
        }
    
        public interface ModelInterface{
            void success(String data);
            void failed();
        }
    
        public void doGet(String url, final ModelInterface modelInterface){
            Request request = new Request.Builder()
                    .get()
                    .url(url)
                    .build();
            Call call = mMOkHttpClient.newCall(request);
            call.enqueue(new Callback() {
                @Override
                public void onFailure(Call call, IOException e) {
                    mHandler.post(new Runnable() {
                        @Override
                        public void run() {
                            modelInterface.failed();
                        }
                    });
                }
    
                @Override
                public void onResponse(Call call, Response response) throws IOException {
                    final String data = response.body().string();
                    mHandler.post(new Runnable() {
                        @Override
                        public void run() {
                            modelInterface.success(data);
                        }
                    });
                }
            });
        }
    
        public void doPost(String url, Map<String,String> map,final ModelInterface modelInterface){
            FormBody.Builder builder = new FormBody.Builder();
            for (String key:map.keySet()){
                builder.add(key,map.get(key));
            }
            FormBody formBody = builder.build();
            Request request = new Request.Builder()
                    .post(formBody)
                    .url(url)
                    .build();
            Call call = mMOkHttpClient.newCall(request);
            call.enqueue(new Callback() {
                @Override
                public void onFailure(Call call, IOException e) {
                    modelInterface.failed();
                }
    
                @Override
                public void onResponse(Call call, Response response) throws IOException {
                    final String data = response.body().string();
                    mHandler.post(new Runnable() {
                        @Override
                        public void run() {
                            modelInterface.success(data);
                        }
                    });
                }
            });
        }
    
    }
    
    

    5.左边presenter(get)

    public class RecyPresenter {
    
        public void mkkPresenter(String url, final PresenterInterface presenterInterface){
            UtilsModel instance = UtilsModel.getInstance();
            instance.doGet(url, new UtilsModel.ModelInterface() {
                @Override
                public void success(String data) {
                    LeftBean leftBean = new Gson().fromJson(data, LeftBean.class);
                    List<LeftBean.DataBean> data1 = leftBean.getData();
                    presenterInterface.success(data1);
                }
    
                @Override
                public void failed() {
                    presenterInterface.failed();
                }
            });
        }
        public interface PresenterInterface{
            void success(List<LeftBean.DataBean> data1);
            void failed();
        }
    }
    
    

    6.右边presenter(post)

    public class RightPresenter {
        public void RightPresenter(String url, Map<String,String> map, final RightInterface rightInterface){
            UtilsModel instance = UtilsModel.getInstance();
            instance.doPost(url, map, new UtilsModel.ModelInterface() {
                @Override
                public void success(String data) {
                    RightBean rightBean = new Gson().fromJson(data, RightBean.class);
                    List<RightBean.DataBean> data1 = rightBean.getData();
                    rightInterface.success(data1);
                }
    
                @Override
                public void failed() {
                    rightInterface.failed();
                }
            });
        }
        public interface RightInterface{
            void success(List<RightBean.DataBean> data1);
            void failed();
        }
    }
    
    

    7.左边adapter

    public class RecyAdapter extends RecyclerView.Adapter<RecyAdapter.ViewHoldere> {
    
    
    
        private List<LeftBean.DataBean> left;
        private Context mContext;
    
        public RecyAdapter(List<LeftBean.DataBean> left, Context context) {
            this.left = left;
            mContext = context;
        }
    
        @NonNull
        @Override
        public ViewHoldere onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {
            View view = View.inflate(mContext, R.layout.item_left,null);
            ViewHoldere viewHoldere = new ViewHoldere(view);
            return viewHoldere;
        }
    
        @Override
        public void onBindViewHolder(@NonNull ViewHoldere viewHoldere, final int i) {
            viewHoldere.mTitle.setText(left.get(i).getName());
            viewHoldere.mTitle.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    mRecyAdapterInterface.success(left.get(i).getCid() + "");
                }
            });
        }
    
        @Override
        public int getItemCount() {
            return left.size();
        }
    
        public class ViewHoldere extends RecyclerView.ViewHolder {
    
            private final TextView mTitle;
    
            public ViewHoldere(@NonNull View itemView) {
                super(itemView);
                mTitle = itemView.findViewById(R.id.title);
            }
        }
    
    
        //点击条目的接口回调
        public interface RecyAdapterInterface{
            void success(String s);
        }
        private RecyAdapterInterface mRecyAdapterInterface;
        public void setRecyAdapterInterface(RecyAdapterInterface recyAdapterInterface){
            mRecyAdapterInterface = recyAdapterInterface;
        }
    }
    
    

    8.右边的adapter

    public class RightAdapter extends RecyclerView.Adapter<RightAdapter.ViewHolder> {
    
        private Context mContext;
        private List<RightBean.DataBean> right;
    
        public RightAdapter(Context context, List<RightBean.DataBean> right) {
            mContext = context;
            this.right = right;
        }
    
        @NonNull
        @Override
        public ViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {
            View view = View.inflate(mContext, R.layout.item_right,null);
            ViewHolder viewHolder = new ViewHolder(view);
            return viewHolder;
        }
    
        @Override
        public void onBindViewHolder(@NonNull ViewHolder viewHolder, int i) {
            RightBean.DataBean dataBean = right.get(i);
            Picasso.with(mContext).load(dataBean.getList().get(i).getIcon()).into(viewHolder.mImage);
            viewHolder.mName.setText(dataBean.getList().get(i).getName());
        }
    
        @Override
        public int getItemCount() {
            return right.size();
        }
    
        public class ViewHolder extends RecyclerView.ViewHolder {
    
            private final ImageView mImage;
            private final TextView mName;
    
            public ViewHolder(@NonNull View itemView) {
                super(itemView);
                mImage = itemView.findViewById(R.id.image);
                mName = itemView.findViewById(R.id.name);
            }
        }
    }
    
    

    9.主页面

    public class LeftFragment extends Fragment {
    
    
        //左侧
        public static final String LeftUrl = "http://www.zhaoapi.cn/product/getCatagory";
        public static final String RightUrl = "http://www.zhaoapi.cn/product/getProductCatagory";
        private RecyclerView mRecyclerView;
        private LinearLayout mLinearLayout;
        private ScrollView mScrollView;
        private String CID;
    
        public LeftFragment() {
        }
    
        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                                 Bundle savedInstanceState) {
            // Inflate the layout for this fragment
            View view = View.inflate(getActivity(), R.layout.fragment_left, null);
            //初始化控件
            initView(view);
            //初始化数据
            initData();
    
    
            return view;
        }
    
        /**
         * 初始化数据
         */
        private void initData() {
            //加一个条目分割线  垂直
            DividerItemDecoration dividerItemDecoration = new DividerItemDecoration(getActivity(), DividerItemDecoration.VERTICAL);
            //添加到mRecyclerView里边
            mRecyclerView.addItemDecoration(dividerItemDecoration);
            //设置LinearLayoutManager
            mRecyclerView.setLayoutManager(new LinearLayoutManager(getActivity()));
            //创建P层
            RecyPresenter recyPresenter = new RecyPresenter();
            recyPresenter.mkkPresenter(LeftUrl, new RecyPresenter.PresenterInterface() {
                @Override
                public void success(List<LeftBean.DataBean> data1) {
                    //recyadapter
                    RecyAdapter recyAdapter = new RecyAdapter(data1, getActivity());
                    mRecyclerView.setAdapter(recyAdapter);
                    recyAdapter.setRecyAdapterInterface(new RecyAdapter.RecyAdapterInterface() {
                        @Override
                        public void success(String s) {
                            //先在上边定义一个CID
                            Toast.makeText(getActivity(), s, Toast.LENGTH_SHORT).show();
                            CID = s;
                            initRight();
                        }
                    });
                }
                @Override
                public void failed() { }
            });
        }
    
        private void initRight() {
            RightPresenter rightPresenter = new RightPresenter();
            final Map<String,String> map = new HashMap<>();
            map.put("cid",CID);
            rightPresenter.RightPresenter(RightUrl, map, new RightPresenter.RightInterface() {
                @Override
                public void success(List<RightBean.DataBean> data1) {
                    mLinearLayout.removeAllViews();
                    if (data1 != null){
                        for (int i = 0; i < data1.size(); i++) {
                            TextView textView = new TextView(getContext());
                            textView.setTextSize(20);
                            textView.setTextColor(Color.RED);
                            textView.setText(data1.get(i).getName());
                            //创建网格布局
                            GridLayoutManager gridLayoutManager = new GridLayoutManager(getContext(), 4);
                            //创建RecyclerView
                            RecyclerView recyclerView = new RecyclerView(getContext());
                            //添加到布局管理器
                            recyclerView.setLayoutManager(gridLayoutManager);
                            //创建适配器
                            RightAdapter rightAdapter = new RightAdapter(getContext(), data1);
                            //添加适配器
                            recyclerView.setAdapter(rightAdapter);
                            //更新适配器
                            rightAdapter.notifyDataSetChanged();
                            mLinearLayout.addView(textView);
                            mLinearLayout.addView(recyclerView);
    
                        }
                    }
                }
    
                @Override
                public void failed() {
    
                }
            });
        }
    
    
    
    
        /**
         * 初始化控件
         * @param view
         */
        private void initView(View view) {
            mRecyclerView = (RecyclerView) view.findViewById(R.id.mRecyclerView);
            mLinearLayout = (LinearLayout) view.findViewById(R.id.mLinearLayout);
            mScrollView = (ScrollView) view.findViewById(R.id.mScrollView);
        }
    }
    
    

    10.左边bean

    public class LeftBean {
    
        /**
         * msg :
         * code : 0
         * data : [{"cid":1,"createtime":"2017-10-10T19:41:39","icon":"http://120.27.23.105/images/category/shop.png","ishome":1,"name":"京东超市"},{"cid":2,"createtime":"2017-10-10T19:41:39","icon":"http://120.27.23.105/images/category/qqg.png","ishome":1,"name":"全球购"},{"cid":3,"createtime":"2017-10-10T19:45:11","icon":"http://120.27.23.105/images/category/phone.png","ishome":1,"name":"手机数码"},{"cid":5,"createtime":"2017-10-10T20:12:03","icon":"http://120.27.23.105/images/category/man.png","ishome":1,"name":"男装"},{"cid":6,"createtime":"2017-10-10T20:12:03","icon":"http://120.27.23.105/images/category/girl.png","ishome":1,"name":"女装"},{"cid":7,"createtime":"2017-10-10T20:12:03","icon":"http://120.27.23.105/images/category/manshoe.png","ishome":1,"name":"男鞋"},{"cid":8,"createtime":"2017-10-10T20:12:03","icon":"http://120.27.23.105/images/category/girlshoe.png","ishome":1,"name":"女鞋"},{"cid":9,"createtime":"2017-10-10T20:12:03","icon":"http://120.27.23.105/images/category/shirt.png","ishome":1,"name":"内衣配饰"},{"cid":10,"createtime":"2017-10-10T20:12:03","icon":"http://120.27.23.105/images/category/bag.png","ishome":1,"name":"箱包手袋"},{"cid":11,"createtime":"2017-10-10T20:12:03","icon":"http://120.27.23.105/images/category/beauty.png","ishome":1,"name":"美妆个护"},{"cid":12,"createtime":"2017-10-10T20:12:03","icon":"http://120.27.23.105/images/category/jewel.png","ishome":1,"name":"钟表珠宝"},{"cid":13,"createtime":"2017-10-10T20:12:03","icon":"http://120.27.23.105/images/category/luxury.png","ishome":1,"name":"奢侈品"},{"cid":14,"createtime":"2017-10-10T20:12:03","icon":"http://120.27.23.105/images/category/computer.png","ishome":1,"name":"电脑办公"},{"cid":15,"createtime":"2017-09-29T10:13:48","icon":"http://120.27.23.105/images/icon.png","ishome":0,"name":"家用电器"},{"cid":16,"createtime":"2017-09-29T10:13:48","icon":"http://120.27.23.105/images/icon.png","ishome":0,"name":"食品生鲜"},{"cid":17,"createtime":"2017-09-29T10:13:48","icon":"http://120.27.23.105/images/icon.png","ishome":0,"name":"酒水饮料"},{"cid":18,"createtime":"2017-09-29T10:13:48","icon":"http://120.27.23.105/images/icon.png","ishome":0,"name":"母婴童装"},{"cid":19,"createtime":"2017-09-29T10:13:48","icon":"http://120.27.23.105/images/icon.png","ishome":0,"name":"玩具乐器"},{"cid":20,"createtime":"2017-09-29T10:13:48","icon":"http://120.27.23.105/images/icon.png","ishome":0,"name":"医药保健"}]
         */
    
        private String msg;
        private String code;
        private List<DataBean> data;
    
        public String getMsg() {
            return msg;
        }
    
        public void setMsg(String msg) {
            this.msg = msg;
        }
    
        public String getCode() {
            return code;
        }
    
        public void setCode(String code) {
            this.code = code;
        }
    
        public List<DataBean> getData() {
            return data;
        }
    
        public void setData(List<DataBean> data) {
            this.data = data;
        }
    
        public static class DataBean {
            /**
             * cid : 1
             * createtime : 2017-10-10T19:41:39
             * icon : http://120.27.23.105/images/category/shop.png
             * ishome : 1
             * name : 京东超市
             */
    
            private int cid;
            private String createtime;
            private String icon;
            private int ishome;
            private String name;
    
            public int getCid() {
                return cid;
            }
    
            public void setCid(int cid) {
                this.cid = cid;
            }
    
            public String getCreatetime() {
                return createtime;
            }
    
            public void setCreatetime(String createtime) {
                this.createtime = createtime;
            }
    
            public String getIcon() {
                return icon;
            }
    
            public void setIcon(String icon) {
                this.icon = icon;
            }
    
            public int getIshome() {
                return ishome;
            }
    
            public void setIshome(int ishome) {
                this.ishome = ishome;
            }
    
            public String getName() {
                return name;
            }
    
            public void setName(String name) {
                this.name = name;
            }
        }
    }
    
    

    11.右边bean

    public class RightBean {
    
        /**
         * msg : 获取子分类成功
         * code : 0
         * data : [{"cid":"1","list":[{"icon":"http://120.27.23.105/images/icon.png","name":"月饼","pcid":1,"pscid":1},{"icon":"http://120.27.23.105/images/icon.png","name":"坚果炒货","pcid":1,"pscid":2},{"icon":"http://120.27.23.105/images/icon.png","name":"糖巧","pcid":1,"pscid":3},{"icon":"http://120.27.23.105/images/icon.png","name":"休闲零食","pcid":1,"pscid":4},{"icon":"http://120.27.23.105/images/icon.png","name":"肉干肉脯","pcid":1,"pscid":5},{"icon":"http://120.27.23.105/images/icon.png","name":"饼干蛋糕","pcid":1,"pscid":6},{"icon":"http://120.27.23.105/images/icon.png","name":"蜜饯果干","pcid":1,"pscid":7},{"icon":"http://120.27.23.105/images/icon.png","name":"无糖食品","pcid":1,"pscid":8}],"name":"休闲零食","pcid":"1"},{"cid":"1","list":[{"icon":"http://120.27.23.105/images/icon.png","name":"新鲜水果","pcid":2,"pscid":9},{"icon":"http://120.27.23.105/images/icon.png","name":"海鲜水产","pcid":2,"pscid":10},{"icon":"http://120.27.23.105/images/icon.png","name":"精选肉类","pcid":2,"pscid":11},{"icon":"http://120.27.23.105/images/icon.png","name":"蛋类","pcid":2,"pscid":12},{"icon":"http://120.27.23.105/images/icon.png","name":"新鲜蔬菜","pcid":2,"pscid":13},{"icon":"http://120.27.23.105/images/icon.png","name":"冷冻食品","pcid":2,"pscid":14},{"icon":"http://120.27.23.105/images/icon.png","name":"饮品甜品","pcid":2,"pscid":15},{"icon":"http://120.27.23.105/images/icon.png","name":"大闸蟹","pcid":2,"pscid":16}],"name":"京东生鲜","pcid":"2"},{"cid":"1","list":[{"icon":"http://120.27.23.105/images/icon.png","name":"大米","pcid":3,"pscid":21},{"icon":"http://120.27.23.105/images/icon.png","name":"面粉","pcid":3,"pscid":22},{"icon":"http://120.27.23.105/images/icon.png","name":"杂粮","pcid":3,"pscid":23},{"icon":"http://120.27.23.105/images/icon.png","name":"食用油","pcid":3,"pscid":24},{"icon":"http://120.27.23.105/images/icon.png","name":"调味品","pcid":3,"pscid":25},{"icon":"http://120.27.23.105/images/icon.png","name":"方便速食","pcid":3,"pscid":26},{"icon":"http://120.27.23.105/images/icon.png","name":"有机食品","pcid":3,"pscid":27}],"name":"粮油调味","pcid":"3"},{"cid":"1","list":[{"icon":"http://120.27.23.105/images/icon.png","name":"饮用水","pcid":4,"pscid":28},{"icon":"http://120.27.23.105/images/icon.png","name":"饮料","pcid":4,"pscid":29},{"icon":"http://120.27.23.105/images/icon.png","name":"牛奶乳品","pcid":4,"pscid":30},{"icon":"http://120.27.23.105/images/icon.png","name":"名茶","pcid":4,"pscid":31},{"icon":"http://120.27.23.105/images/icon.png","name":"蜂蜜","pcid":4,"pscid":32}],"name":"水饮茗茶","pcid":"4"},{"cid":"1","list":[{"icon":"http://120.27.23.105/images/icon.png","name":"白酒","pcid":5,"pscid":33},{"icon":"http://120.27.23.105/images/icon.png","name":"葡萄酒","pcid":5,"pscid":34},{"icon":"http://120.27.23.105/images/icon.png","name":"洋酒","pcid":5,"pscid":35},{"icon":"http://120.27.23.105/images/icon.png","name":"啤酒","pcid":5,"pscid":36},{"icon":"http://120.27.23.105/images/icon.png","name":"黄酒","pcid":5,"pscid":37},{"icon":"http://120.27.23.105/images/icon.png","name":"陈年老酒","pcid":5,"pscid":38}],"name":"中外名酒","pcid":"5"}]
         */
    
        private String msg;
        private String code;
        private List<DataBean> data;
    
        public String getMsg() {
            return msg;
        }
    
        public void setMsg(String msg) {
            this.msg = msg;
        }
    
        public String getCode() {
            return code;
        }
    
        public void setCode(String code) {
            this.code = code;
        }
    
        public List<DataBean> getData() {
            return data;
        }
    
        public void setData(List<DataBean> data) {
            this.data = data;
        }
    
        public static class DataBean {
            /**
             * cid : 1
             * list : [{"icon":"http://120.27.23.105/images/icon.png","name":"月饼","pcid":1,"pscid":1},{"icon":"http://120.27.23.105/images/icon.png","name":"坚果炒货","pcid":1,"pscid":2},{"icon":"http://120.27.23.105/images/icon.png","name":"糖巧","pcid":1,"pscid":3},{"icon":"http://120.27.23.105/images/icon.png","name":"休闲零食","pcid":1,"pscid":4},{"icon":"http://120.27.23.105/images/icon.png","name":"肉干肉脯","pcid":1,"pscid":5},{"icon":"http://120.27.23.105/images/icon.png","name":"饼干蛋糕","pcid":1,"pscid":6},{"icon":"http://120.27.23.105/images/icon.png","name":"蜜饯果干","pcid":1,"pscid":7},{"icon":"http://120.27.23.105/images/icon.png","name":"无糖食品","pcid":1,"pscid":8}]
             * name : 休闲零食
             * pcid : 1
             */
    
            private String cid;
            private String name;
            private String pcid;
            private List<ListBean> list;
    
            public String getCid() {
                return cid;
            }
    
            public void setCid(String cid) {
                this.cid = cid;
            }
    
            public String getName() {
                return name;
            }
    
            public void setName(String name) {
                this.name = name;
            }
    
            public String getPcid() {
                return pcid;
            }
    
            public void setPcid(String pcid) {
                this.pcid = pcid;
            }
    
            public List<ListBean> getList() {
                return list;
            }
    
            public void setList(List<ListBean> list) {
                this.list = list;
            }
    
            public static class ListBean {
                /**
                 * icon : http://120.27.23.105/images/icon.png
                 * name : 月饼
                 * pcid : 1
                 * pscid : 1
                 */
    
                private String icon;
                private String name;
                private int pcid;
                private int pscid;
    
                public String getIcon() {
                    return icon;
                }
    
                public void setIcon(String icon) {
                    this.icon = icon;
                }
    
                public String getName() {
                    return name;
                }
    
                public void setName(String name) {
                    this.name = name;
                }
    
                public int getPcid() {
                    return pcid;
                }
    
                public void setPcid(int pcid) {
                    this.pcid = pcid;
                }
    
                public int getPscid() {
                    return pscid;
                }
    
                public void setPscid(int pscid) {
                    this.pscid = pscid;
                }
            }
        }
    }
    
    

    注意:

    
    	//okhttp依赖
        implementation 'com.squareup.okhttp3:okhttp:3.12.0'
        //recyclerView依赖
        implementation 'com.android.support:recyclerview-v7:28.0.0'
        //gson依赖
        implementation 'com.google.code.gson:gson:2.2.4'
        //picasso依赖
        implementation 'com.squareup.picasso:picasso:2.3.2'
    
    	//网络权限
    	<uses-permission android:name="android.permission.INTERNET"/>
    
    	//左边网络请求地址
    	public static final String LeftUrl = "http://www.zhaoapi.cn/product/getCatagory";
    	//右边网络请求地址
        	public static final String RightUrl = "http://www.zhaoapi.cn/product/getProductCatagory";
    
    更多相关内容
  • 使用Fragment+RadioGroup实现的分类列表菜单,博客文章链接 http://blog.csdn.net/qmln31821007/article/details/43792655
  • 获取商品分类信息 components=>新建文件夹goods=>Cate.vue index.js 配置路由 接口文档 响应数据 { "data": [ { "cat_id": 1, "cat_name": "大家电", "cat_pid": 0, "cat_level": 0, "cat_deleted": ...

    获取商品分类信息

    components=>新建文件夹goods=>Cate.vue

    index.js 配置路由

    接口文档
    在这里插入图片描述

    响应数据

    {
        "data": [
            {
                "cat_id": 1,
                "cat_name": "大家电",
                "cat_pid": 0,
                "cat_level": 0,
                "cat_deleted": false,
                "children": [
                    {
                        "cat_id": 3,
                        "cat_name": "电视",
                        "cat_pid": 1,
                        "cat_level": 1,
                        "cat_deleted": false,
                        "children": [
                            {
                                "cat_id": 6,
                                "cat_name": "曲面电视",
                                "cat_pid": 3,
                                "cat_level": 2,
                                "cat_deleted": false
                            },
                            {
                                "cat_id": 7,
                                "cat_name": "海信",
                                "cat_pid": 3,
                                "cat_level": 2,
                                "cat_deleted": false
                            }
                        ]
                    }
                ]
            }
        ],
        "meta": {
            "msg": "获取成功",
            "status": 200
        }
    }
    

    获取商品分类的数据

    <template>
        <div>
            <!-- 面包屑导航-->
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>商品管理</el-breadcrumb-item>
          <el-breadcrumb-item>商品分类</el-breadcrumb-item>
        </el-breadcrumb>
    
        <!-- 卡片试图-->
        <el-card>
          <el-row >
            <el-col>
              <el-button type="primary">添加分类</el-button>
            </el-col>
          </el-row>
    
        </el-card>
        </div>
    </template>
    
    <script>
    export default {
        data(){
            return{
                // 查询分类列表的参数对象
                queryInfo:{
                    type:3,
                    pagenum:1,
                    pagesize:5
                },
                // 分类列表
                cateList:[],
                // 总记录数
                total:0,
            }
        },
        created(){
            this.getCateList()
        },
        methods:{
            async getCateList(){
                const {data:res} = await this.$http.get('categories',{
                    params:this.queryInfo
                })
                if(res.meta.status !== 200){
                    return this.$message.error('获取商品列表失败')
                }
                this.cateList=res.data.result
                this.total = res.data.total
                console.log(this.cateList)
            }
        }
    }
    </script>
    

    在这里插入图片描述

    展示商品分类列表

    在这里插入图片描述
    elementui 是没有这种组件的

    需要安装新的依赖
    在这里插入图片描述

    如果你是使用 vue create my-project 搭建项目,使用时操作如下

    npm i vue-table-with-tree-grid -S
    
    // 全局注册第三方表格组件
    import ZkTable from 'vue-table-with-tree-grid'
    Vue.component('tree-table',ZkTable)
    

    使用文档地址vue-table-with-tree-grid

    <!-- tree-table 表格-->
          <tree-table :data="cateList" :columns="columns"></tree-table>
    
    //tree-table列的定义
                columns:[
                    {
                        label:'分类名称',
                        prop:"cat_name"
                }
                    
                ]
    

    为啥会直接显示分类的下属的属性因为返回的数据名就时children,该属性用来指定子一级的数据
    在这里插入图片描述
    去除复选框
    在这里插入图片描述

    不需要展开
    在这里插入图片描述

    需要索引列
    在这里插入图片描述

    //tree-table列的定义
                columns:[
                    {
                        label:'分类名称',
                        prop:"cat_name"
                },
                {
                        label:'是否有效',
                        // 将当前列定义为模板列
                        type:'template',
                        // 当前列使用的模板名称
                        template:'isOk'
                }
                    
                ]
    
    <!-- tree-table 表格-->
          <tree-table :data="cateList" :columns="columns" :selection-type=false :expand-type=false show-index border>
              <!-- 是否有效-->
              <template slot="isOk" slot-scope="scope">
                  <i class="el-icon-error" style="color:red" v-if="scope.row.cat_deleted"></i>
                  <i class="el-icon-success" style="color:lightgreen" v-else></i>
              </template>
          </tree-table>
    

    在这里插入图片描述

    //tree-table列的定义
                columns:[
                    {
                        label:'分类名称',
                        prop:"cat_name"
                },
                {
                        label:'是否有效',
                        // 将当前列定义为模板列
                        type:'template',
                        // 当前列使用的模板名称
                        template:'isOk'
                },
                {
                        label:'排序',
                        // 将当前列定义为模板列
                        type:'template',
                        // 当前列使用的模板名称
                        template:'order'
                },
                    
                ]
    
    <!-- 排序-->
              <template slot="order" slot-scope="scope">
                  <el-tag size="mini" v-if="scope.row.cat_level===0">一级</el-tag>
                  <el-tag size="mini" type="success" v-else-if="scope.row.cat_level===1">二级</el-tag>
                  <el-tag size="mini" type="waring" v-else>三级</el-tag>
              </template>
    
    <!-- 操做-->
              <template slot="operater" slot-scope="scope">
                  <el-button size="mini" type="primary" class="el-icon-edit">编辑</el-button>
                  <el-button size="mini" type="danger" class="el-icon-delete">删除</el-button>
              </template>
    
    {
    label:'操作',
    // 将当前列定义为模板列
    type:'template',
    // 当前列使用的模板名称
    template:'operater'
                },
    
    <!-- 分页-->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryInfo.pagenum"
            :page-sizes="[3,5,10,15]"
            :page-size="queryInfo.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
    
    // 分页 当页大小改变时
        handleSizeChange(pagesize){
            this.queryInfo.pagesize=pagesize
            this.getCateList()
        },
        handleCurrentChange(pagenum){
            this.queryInfo.pagenum=pagenum
            this.getCateList()
        }
    

    完整代码

    <template>
      <div>
        <!-- 面包屑导航-->
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>商品管理</el-breadcrumb-item>
          <el-breadcrumb-item>商品分类</el-breadcrumb-item>
        </el-breadcrumb>
    
        <!-- 卡片试图-->
        <el-card>
          <el-row>
            <el-col>
              <el-button type="primary">添加分类</el-button>
            </el-col>
          </el-row>
    
          <!-- tree-table 表格-->
          <tree-table :data="cateList" :columns="columns" :selection-type="false" :expand-type="false" show-index border>
            <!-- 是否有效-->
            <template slot="isOk" slot-scope="scope">
              <i class="el-icon-error" style="color: red" v-if="scope.row.cat_deleted"></i>
              <i class="el-icon-success" style="color: lightgreen" v-else></i>
            </template>
    
            <!-- 排序-->
            <template slot="order" slot-scope="scope">
              <el-tag size="mini" v-if="scope.row.cat_level === 0">一级</el-tag>
              <el-tag size="mini" type="success" v-else-if="scope.row.cat_level === 1">二级</el-tag>
              <el-tag size="mini" type="warning" v-else>三级</el-tag>
            </template>
    
            <!-- 操做-->
            <template slot="operater" >
              <el-button size="mini" type="primary" class="el-icon-edit">编辑</el-button>
              <el-button size="mini" type="danger" class="el-icon-delete">删除</el-button>
            </template>
          </tree-table>
    
          <!-- 分页-->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryInfo.pagenum"
            :page-sizes="[3,5,10,15]"
            :page-size="queryInfo.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </el-card>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          // 查询分类列表的参数对象
          queryInfo: {
            type: 3,
            pagenum: 1,
            pagesize: 5,
          },
          // 分类列表
          cateList: [],
          // 总记录数
          total: 0,
          //tree-table列的定义
          columns: [
            {
              label: '分类名称',
              prop: 'cat_name',
            },
            {
              label: '是否有效',
              // 将当前列定义为模板列
              type: 'template',
              // 当前列使用的模板名称
              template: 'isOk',
            },
            {
              label: '排序',
              // 将当前列定义为模板列
              type: 'template',
              // 当前列使用的模板名称
              template: 'order',
            },
            {
              label: '操作',
              // 将当前列定义为模板列
              type: 'template',
              // 当前列使用的模板名称
              template: 'operater',
            },
          ],
        }
      },
      created() {
        this.getCateList()
      },
      methods: {
        async getCateList() {
          const { data: res } = await this.$http.get('categories', {
            params: this.queryInfo,
          })
          if (res.meta.status !== 200) {
            return this.$message.error('获取商品列表失败')
          }
          this.cateList = res.data.result
          this.total = res.data.total
          console.log(this.cateList)
        },
        // 分页 当页大小改变时
        handleSizeChange(pagesize){
            this.queryInfo.pagesize=pagesize
            this.getCateList()
        },
        handleCurrentChange(pagenum){
            this.queryInfo.pagenum=pagenum
            this.getCateList()
        }
      },
    }
    </script>
    
    展开全文
  • 产生这个问题的原因主要是列表嵌套多次刷新导致添加多次,所以只需要判断每个子item的第一行或者第一列item的时候添加分割线就行了。 解决方法如下: 使用嵌套的子RecyclerView增加判断条件即可 if ...

    老套路先看图:

    解决之前

    解决之后

    产生这个问题的原因主要是列表嵌套多次刷新导致添加多次,所以只需要判断每个子item的第一行或者第一列item的时候添加分割线就行了。

    解决方法如下:

    使用嵌套的子RecyclerView增加判断条件即可

    if (childrenRecyclerView.getItemDecorationCount == 0) {
                childrenRecyclerView.addItemDcoration(new GridVerticalSpacesItemDecoration(20, 28, 7));
            }

    上面是伪代码:

    可以看下本人项目源代码

    holder.binding.rvChild.run {
                        adapter = childAdapter
                        layoutManager = GridLayoutManager(requireContext(), 7)
                        if (itemDecorationCount == 0) {
                            addItemDecoration(GridVerticalSpacesItemDecoration(20, 28, 7))
                        }
                    }

    在此感谢原博主:博主直达博主直达

    展开全文
  • 如何实现列表三级分类---后端+前端

    千次阅读 2021-03-13 18:58:42
    对于分类来说,一般包括一级分类,二级分类,三级分类, 大部分网站都是左边点击二级分类,右边显示相对应商品 下面就来为大家详细分析一下该如何实现吧。 如图: 分析图 1.1后端实现:JavaBean与数据库匹配字段用于...

    对于分类来说,一般包括一级分类,二级分类,三级分类, 大部分网站都是左边点击二级分类,右边显示相对应商品 下面就来为大家详细分析一下该如何实现吧。 如图:

    21011fdb8b1e80e98df1923e6fac5618.png

    分析图

    368826f50872fd44b4a7dc93aa465e51.png

    1.1后端实现:JavaBean

    与数据库匹配字段

    用于封装,每一个分类,对应多个子分类

    7a430d7ad66b878c69ad80c260fd9fb9.png

    1.2后端实现:

    数据库中的数据必须交特殊的,先录入父分类,再录入子分类,为了保证所有的子分类,可以在遍历找到父分类,数据需要排序。

    步骤一: mapper,通用mapper

    @org.apache.ibatis.annotations.Mapper

    public interface CategoryMapper extends Mapper {

    }

    步骤二:service ,

    @Service

    @Transactional

    public class CategoryService {

    @Resource

    private CategoryMapper categoryMapper;

    /**

    * 查询所有分类(一级分类-->二级分类-->三级分类)

    * @return

    */

    public List findAll(){

    //1 查询所有(安排父分类id排序)先查询到一级分类

    Example example = new Example(Category.class);

    example.setOrderByClause("parent_id asc");

    List list = categoryMapper.selectByExample(example);

    //2 组装数据

    // 2.1 提供新集合,组装后的数据

    List returnList = new ArrayList<>();

    // 2.2 提供Map进行缓存,子分类可以快速找到父分类

    Map cacheMap = new HashMap<>();

    //2.3 组装

    for(Category category : list ) {

    //如果父分类id为0,表示一级分类

    if (category.getParentId() == 0) {

    returnList.add( category );

    }

    //将自己添加到map缓存中,方便子分类找到自己

    cacheMap.put(category.getId() , category);

    //子分类从缓存map获得父分类

    Category parentCategory = cacheMap.get(category.getParentId());

    if(parentCategory != null) {

    parentCategory.getChildren().add(category);

    }

    }

    return returnList;

    }

    }

    步骤三:controller

    @RestController

    @RequestMapping("/categorys")

    public class CategoryController {

    @Resource

    private CategoryService categoryService;

    @GetMapping

    public BaseResult findAll(){

    //查询

    List list = categoryService.findAll();

    //返回

    return BaseResult.ok("查询成功", list );

    }

    }

    通过Postman 测试

    36b3559b28d218b845bc3392854c29af.png

    我使用Visual Studio Code 软件,使用Vue-cli脚手架搭建前端项目

    步骤一:在plugins创建 api.server.js,编写服务端api.js,

    538348a13a5b8f821fb35006fb83aefb.png

    步骤二:编写服务端api.js,修改nuxt.config.js 配置仅服务器可用

    45008b549bdcb4f1deaeb0fe9dc07b32.png

    步骤三:修改 api.server.js,查询所有的分类

    f7c02805df3a57928a635eebf9f9d1e0.png

    步骤四:~pages/index.vue,使用asyncData进行查询

    48e312e2982db4ef15215a6082a0cc92.png

    步骤五: ~pages/index.vue,设置HeaderSearch组件 list 属性(相当于实参

    步骤六:修改 HeaderSearch组件,声明list属性(相当于形成)

    export default {

    props: {

    list: {   //属性list,属性值类型为数组Array

    type: Array

    }

    }

    }

    步骤七:修改 HeaderSearch组件,遍历展示数据

    如图:

    2a7a98d175ea083de9df1002c27158ec.png

    展开全文
  • ABB机器人指令列表分类详解

    千次阅读 多人点赞 2020-04-12 22:52:21
    指令列表分类就是这些了,如果你的机器人的系统版本是robotware6.06及以上,那么指令列表中还有一个过滤器的功能也可以使用,让我们抛开分类的限制通过输入指令字母快速索引到你想使用的指令。 这次的分享就到...
  • 实现三级分类列表展示,查看下一级 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>category管理</title> <meta ...
  • 效果仿x团小程序的商品列表滚动时,联动商品分类的效果。 简单描述思路: 1、商品列表做出不同分类的标记位置 2、监听商品列表滚动时,是否到达分类标记位置的高度 3、符合达到标记位置的高度后,触发商品分类...
  • 商品分类Classify: <template> <div> <div style="display: flex;"> <div class="oneNav"> <!-- vant侧边导航 --> <van-sidebar style="height: 617px; ...
  • 作业如图所示,求大神指导,就是如何实现点击左侧列表,右侧分类
  • 输入一个列表,要求列表中的每个元素都为正整数且列表包含的元素个数为偶数; 将列表中前一半元素保存至字典的第一个键值1中,后一半元素保存至第二个键值2中。 可以使用以下实现列表alist的输入: alist=list...
  • 效果图 实现/原理 点击分类,滚动到列表对应位置。 用上了< scroll-view >这个组件,包括滚动时...用上了wx.createSelectorQuery()这个api,直接获取每个分类列表的高度,顶部位置等。 我们就可以根据每个...
  • 仿京东分类联动列表

    千次阅读 2017-05-23 12:58:06
    前段时间,项目需求需要做一个类似京东的这种分类,后来花时间做了,然并卵,每过两天需求变了*&%#$@^^%6*&*67.....但既然做了就记下来吧....
  • 仿京东、当当等大型网站商品分类、产品分类展开菜单,鼠标移动对应分类上右侧展开更详细分类特效,此分类特效采用DIV+CSS+JS实现兼容各大浏览器,可任意更改,简单大方。 商品分类右侧展开更详细特效截图 ...
  • jquery搜索框下拉列表选择搜索分类效果.rarjquery搜索框下拉列表选择搜索分类效果.rarjquery搜索框下拉列表选择搜索分类效果.rarjquery搜索框下拉列表选择搜索分类效果.rarjquery搜索框下拉列表选择搜索分类效果....
  • 在python中对列表的元素进行分类

    千次阅读 2021-01-29 09:26:48
    假设该函数是可传递的和反射的(并且如果不是,则...如果不存在此类组,请创建一个新组,例如使用next以空列表作为默认元素.lst = "a list with some words with different lengths".split()areTheSame = lambda x, y...
  • 淘宝客分类ID列表

    2012-12-16 21:52:15
    淘宝客分类ID列表.rar,淘宝客分类ID列表.xls
  • 对于这种商品列表展示的功能:我们思路如下:第一:开始展示的都是顶级列表,即parentId为0,即每页父类,他就是最顶级的。第二:根据数据格式分析各级的区别:顶级与二级的区别,二级与三级的区别(这些区别就是在写...
  • 网站分类列表页模板主题又称为聚合页,多位产品,或者文章列表页面也是网站中不可或缺的一种页面...4、当前列表分类的栏目名_栏目id_栏目链接 <? $category_title= single_cat_title('', false ); $category_id.
  • 如果大家一直读石头哥的文章,或者看石头哥的...可以看出,我们最顶部是一级菜单,左侧是二级菜单,右侧是最终的三级列表。 我们来理一理层级关系 =宿舍楼号 ====宿舍号 ========学生 聪明的人肯定知道,我们是一.
  • fastadmin列表页,显示分类名称、并且快速搜索时可以选择分类 1、控制器中 public function index() { $this->relationSearch = true; $list = $this->model ->with("category") ->field('...
  • 易语言数据库分类

    2020-07-20 12:10:15
    易语言数据库分类源码,数据库分类,取列表,加入列表,取出列表
  • 根据网上的三级联动修改的 带滚动条分类列表框,代码和数据库一起,单表实现三级联动,支持反选,效果类似于阿里巴巴发布信息里面的分类选择功能。适合分类很多的网站使用。asp+access+js
  • 分类页面预览图: 分类页面主要代码 index.js // pages/category/index.js import { request } from "../../request/index.js" Page({ /** * 页面的初始数据 */ data: { //左侧菜单数据 leftMenuList: [], ...
  • 小程序 | 微信小程序实现商品分类列表
  • 淘宝分类ID,类目列表,详情准确,类目大全 包括一级分类,二级分类,三级分类
  • 我们想在一个单个页面上显示所有Wordpress网站下所有的分类,并且定制每个分类显示的文章的列表数量,这犹如网站地图一般,但可以以最新的文章形式展现出来,或者你做一个静态页面作为主页(page页),那么采用的这...
  • 列表标签的分类及使用

    千次阅读 2019-09-15 16:49:17
    一、列表标签的分类 1、无序列表 2、有序列表 3、自定义列表 二、列表标签的特点 使得界面更加的干净、整洁、有序。 三、列表标签的应用 1、无序列表(ul) 无序列表的各个列表项之间是没有顺序级别之分的,是并列的。...
  • 多级分类列表查询

    千次阅读 2019-09-03 11:24:35
    在数据库中,使用parent_id标签,将父id和子列表关联起来。 面包屑导航 实现思路将浏览的记录,标记放到$scope中进行保存,用entity1,entity2…进行区分 1 修改 itemCatController.js $scope.grade=1;//默认为 1 级...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 456,807
精华内容 182,722
关键字:

列表的分类