精华内容
下载资源
问答
  • dact-admin表格选择器的使用 使用场景 在使用dact下拉选择框时,如果选择框的数据很多几百条,这样在使用普通的选择框时就会很不友好,在dact-admin里面有一种表格选择器的东西,可以很好的解决这个问题。 2...

    dact-admin表格选择器的使用

    1. 使用场景

               在使用dact下拉选择框时,如果选择框的数据很多几百条,这样在使用普通的选择框时就会很不友好,在dact-admin里面有一种表格选择器的东西,可以很好的解决这个问题。

         2.效果图

     

     

     

           想要实现上面的效果呢,其实也是很简单的。

    3.首先创建异步加载类如下图

     

    1. 4.控制器中的写法

    
     

    use App\Admin\Renderable\UserTable;

    use App\Models\Userinfo;

    protected function form()

    {

    return Form::make(new UserinfoImage(), function (Form $form) {

    $form->display('id');

    $form->selectTable('userinfo_id','用户')

    ->title('用户信息') //设备弹框的标题

    ->dialogWidth('50%') //设置弹框的宽度

    ->from(UserTable::make()) //设置渲染类实例,并支持自定义传递自定义参数如->from(UserTable::make(['id' => $form->getKey()])) //查询当前行的id

    ->model(Userinfo::class, 'id','wx_nickname'); // 设置编辑数据的显示

    $form->image('image_path')->uniqueName()->autoUpload()

    ->accept( 'jpg,png,gif,jpeg' , 'image/*' );

    $form->select('platform','所属平台')->options(config('myconfig.config.platform'));

    $form->display('created_at');

    $form->display('updated_at');

    });

    }

    5.加载类中的写法

    
     

    <?php

    namespace App\Admin\Renderable;

    use App\Models\Userinfo as UserinfoModels;

    use Dcat\Admin\Grid;

    use Dcat\Admin\Grid\LazyRenderable;

    class UserTable extends LazyRenderable

    {

    public function grid(): Grid

    {

    // 获取外部传递的参数

    $id = $this->id;

    return Grid::make(new UserinfoModels(), function (Grid $grid) {

    $grid->column('id');

    $grid->column('wx_nickname','用户微信昵称');

    $grid->column('created_at');

    $grid->column('updated_at');

    //指定行选择器选中时显示的值的字段名称

    $grid->rowSelector()->titleColumn('wx_nickname');

    //下面这个目前不太清除 注释掉也能使用(不知道有什么具体的作用)

    $grid->quickSearch(['id', 'wx_nickname']);

    $grid->paginate(10); //每页十条数据

    $grid->disableActions(); //禁止操作

    //设置筛选

    $grid->filter(function (Grid\Filter $filter) {

    $filter->like('wx_nickname','微信用户昵称')->width(4);

    });

    });

    }

    }

    6.到此结束,一定要注意加载类的引入以及命名空间的写法。多选和单选的原理都是一样的只不过是把selectTable换成multipleSelectTable。

    7.注意:单选和多选不能使用同一个加载类,不然多选就会失效。

     

    展开全文
  • 使用表格选择器后提交表单报405错误,去掉后提交表单就正常 <h3>Steps To Reproduce: <p><img alt="image" src="https://img-blog.csdnimg.cn/img_convert/e753338e3e39f83f0604efbfa780cdc7.png" /> 报错&#...
  • Cat-Table-Select 基于Vue+Element的表格选择器 基于 Element 的Vue 组件(Vue.js 2.x) cat-table-select Github 地址 前言 之前自己动手做了个基于Element树选择器 cat-tree-selec ,于是就照着之前的思路又封装...

    Cat-Table-Select 基于Vue+Element的表格选择器

    基于 Element 的Vue 组件(Vue.js 2.x)

    cat-table-select Github 地址

    前言

    之前自己动手做了个基于Element树选择器 cat-tree-selec ,于是就照着之前的思路又封装了个表格选择器。目前已经实现了单选,多选,分页,自定义列,可搜索等功能。

    效果预览

    在这里插入图片描述
    在这里插入图片描述

    Demo 安装

    复制仓库

    git clone git@github.com:scuxiatian/cat-table-select.git

    安装依赖

    npm install

    demo预览

    npm run serve

    实例

    单选表格

    <cat-table-select 
    	v-model="value" 
    	:data="data" 
    	:columns="columns" 
    	:props="props">
    </cat-table-select>
    
    export default {  
    	data () {   
    		return { 
    			value: '',
    			columns: [
    				{ key: 'name',  label: '姓名', width: 100}, 
    				{ key: 'address', label: '地址'  }
    			],
    			props: { key: 'id', label: 'name' },
    			data: [
    				{ id: '1', name: '王小虎1', address: '上海市普陀区金沙江路 1518 弄' }, 
    				{ id: '2', name: '王小虎2', address: '上海市普陀区金沙江路 1517 弄' },
    				{ id: '3', name: '王小虎3', address: '上海市普陀区金沙江路 1519 弄' },
    				{ id: '4', name: '王小虎4', address: '上海市普陀区金沙江路 1516 弄'  }
    			] 
    		}
    	}
    }
    

    可分页

    <cat-table-select 
    	v-model="value" 
    	:data="data" 
    	:columns="columns" 
    	:props="props" 
    	paged 
    	layout="prev, pager, next" 
    	:page-size="2" 
    	:current-page.sync="page">
    </cat-table-select>
    

    多选表格

    <cat-table-select 
    	v-model="value1" 
    	:data="data" 
    	:columns="columns" 
    	:props="props" 
    	multiple>
    </cat-table-select>
    

    自定义row

    <cat-table-select
    	 v-model="value1"
    	  :data="data" 
    	  :columns="columns" 
    	  :props="props"> 
    	  <template v-slot:index="{ index }">{{ index + 1 }}</template> 
    	  <template v-slot:date="{ row }">{{ showDate(row.date) }}</template>
    </cat-table-select>
    

    筛选row

    <cat-table-select 
    	v-model="value1" 
    	:data="data" 
    	:columns="columns" 
    	:props="props" 
    	:filter-method="filterRow" 
    	filterable>
    </cat-table-select>
    
    filterRow (value, data) { 
    	const reg = new RegExp(value) 
    	return data.filter(item => {    return reg.test(item.name)  })
    }
    

    Api 文档

    TableSelect Attributes

    参数 说明 类型 可选值 默认值
    value / v-model 绑定值 boolean / string / number
    multiple 是否多选 boolean false
    disabled 是否禁用 boolean false
    size 输入框尺寸 string medium/small/mini
    clearable 是否可以清空选项 boolean false
    collapse-tags 多选时是否将选中值按文字的形式展示 boolean false
    name table-select input 的 name 属性 string
    placeholder 占位符 string 请选择
    filterable 是否可搜索 boolean false
    placement 弹出框出现位置 string top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end bottom
    tableWidth 表格宽度 string 400px
    layout 组件布局,子组件名用逗号分隔 string prev, pager, next, jumper, ->, total, slot “prev, pager, next, jumper, ->, total”
    pageSize 每页显示条目个数 number 10
    currentPage 当前页数,支持 .sync 修饰符 number 1
    columns 配置选项,具体看下表 array
    props 配置选项,具体看下表 object
    el-table attributes 参考element-ui官网 el-table attributes

    Columns

    参数 说明 类型 可选值 默认值
    key 列值对应列对象的属性名(必填) string
    label 列显示名对应列对象的属性名(必填) string
    width 列宽度 number

    Props

    参数 说明 类型 可选值 默认值
    key 指定row值为row对象的某个属性值(必填) string / number
    label 指定row标签为row对象的某个属性值 string,
    disabled 指定row选择框是否禁用为row对象的某个属性值 boolean

    TableSelect Events

    事件类型 说明 回调参数
    change 选中值发生变化时触发 目前的选中值
    visible-change 下拉框出现/隐藏时触发 出现则为 true,隐藏则为 false
    remove-tag 多选模式下移除tag时触发 移除的tag值
    blur 当 input 失去焦点时触发 (event: Event)
    el-table events 参考element-ui官网 el-table events

    TableSelect V-Slot

    name 说明
    columns中配置的key 自定义备选项的列内容,参数为 { row, index },分别为当前列和索引
    展开全文
  • EasyUI-数据表格选择器

    2019-03-28 10:38:23
    @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title>...script src="~/Scri...


    @{
        Layout = null;
    }
    <!DOCTYPE html>
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Index</title>
        <script src="~/Scripts/jquery-3.3.1.min.js"></script>
        <script src="~/Scripts/jquery.easyui.min.js"></script>
        <script src="~/Scripts/easyui-lang-zh_CN.js"></script>
        <link href="~/Content/EasyUI/themes/icon.css" rel="stylesheet" />
        <link href="~/Content/EasyUI/themes/default/easyui.css" rel="stylesheet" />

    </head>
    <body>
        <h2>DataGrid Selection</h2>
        <p>Choose a selection mode and select one or more rows.</p>
        <div style="margin:20px 0;">
            <a href="#" class="easyui-linkbutton" οnclick="getSelected()">GetSelected</a>
            <a href="#" class="easyui-linkbutton" οnclick="getSelections()">GetSelections</a>
        </div>
        <table id="dg" class="easyui-datagrid" title="DataGrid Selection" style="width:700px;height:250px"
               data-options="singleSelect:true,url:'datagrid_data1.json',method:'get'">
            <thead>
                <tr>
                    <th data-options="field:'itemid',width:80">Item ID</th>
                    <th data-options="field:'productid',width:100">Product</th>
                    <th data-options="field:'listprice',width:80,align:'right'">List Price</th>
                    <th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
                    <th data-options="field:'attr1',width:250">Attribute</th>
                    <th data-options="field:'status',width:60,align:'center'">Status</th>
                </tr>
            </thead>
        </table>
        <div style="margin:10px 0;">
            <span>Selection Mode: </span>
            <select οnchange="$('#dg').datagrid({singleSelect:(this.value==0)})">
                <option value="0">Single Row</option>
                <option value="1">Multiple Rows</option>
            </select>
        </div>
        <script type="text/javascript">
            function getSelected() {
                var row = $('#dg').datagrid('getSelected');
                if (row) {
                    $.messager.alert('Info', row.itemid + ":" + row.productid + ":" + row.attr1);
                }
            }
            function getSelections() {
                var ss = [];
                var rows = $('#dg').datagrid('getSelections');
                for (var i = 0; i < rows.length; i++) {
                    var row = rows[i];
                    ss.push('<span>' + row.itemid + ":" + row.productid + ":" + row.attr1 + '</span>');
                }
                $.messager.alert('Info', ss.join('<br/>'));
            }
        </script>
    </body>
    </html>

    展开全文
  • 适用于PhoneCountryCode的iOS Tableview选择器 预习 播客文件 要使用CocoaPods将PhoneCountryCodePicker集成到您的Xcode项目中,请在您的Podfile指定它: pod 'PhoneCountryCodePicker' 如何使用 # import " ...
  • 在后台管理项目中的表单输入经常需要通过下拉框来选择输入项,为防止用户录入错误,需要下拉框的选项可以维护,并能搜索。发现一个 layui 组件tableSelect组件正好可以实现下拉框列表进行选择的功能,正好可以满足...

         在后台管理项目中的表单输入经常需要通过下拉框来选择输入项,为防止用户录入错误,需要下拉框的选项可以维护,并能搜索。发现一个 layui 组件tableSelect组件正好可以实现下拉框列表进行选择的功能,正好可以满足需求。

        效果如下图所示:

    插件下载地址  https://gitee.com/lolicode/layui_component_tableselect

    使用方法

    1、此组件是在layui的基础上开发的,所以前端页面引用layui.all.js,tableSelect.js ,和 layui.css

    <head th:include="include :: header">
    	<link th:href="@{/ajax/libs/layui/css/layui.css}" rel="stylesheet"/>
    </head>
    <body class="white-bg">
    <script th:src="@{/ajax/libs/layui/layui.all.js}"></script>
    <script src="/ajax/libs/layui/tableSelect.js"></script>

    2、页面代码如下,后端调用api获取json数据,keyword是搜索关键字。组件支持多选,更多参数查看码云上的说明。

     <script type="text/javascript">
            var tableSelect = layui.tableSelect;
            tableSelect.render(
                {
                elem: '#daibiaochu',
                searchKey: 'keyword',
                table: {
                    url: ctx + 'module/pianqu/PQ',
                    cols: [
                        [
                        {type: 'radio'},
                        {field: 'id', title: 'ID'},
                        {field: 'pianqu', title: '片区'},
                        {field: 'daibiaochu', title: '代表处'}
                        ]
                    ]
                },
                done: function (elem, data) {
                    var NEWJSON = []
                    layui.each(data.data, function (index, item) {
                        NEWJSON.push(item.daibiaochu)
                    })
                    elem.val(NEWJSON.join(","))
                }
            })
    </script>

    3、url获取数据格式为GET方式    pianqu/PQ?page=1&limit=10    参数page  ,limit 进行分页 

    返回消息格式如下:

    4、后端代码采用SpringBoot 2.0 + mybaits

    	/**
    	 * 查询片区下拉表
    	 */
    	@RequestMapping(value="/PQ",method=RequestMethod.GET)
    	@ResponseBody
    	public Msg XH (@RequestParam Map<String, Object> paramMap)
    	{
    		Map<String, Object> data = new HashMap<>();
    		//页数
    		Integer Num = Integer.parseUnsignedInt(paramMap.get("page").toString());    
    		//每页数
    		Integer limit = Integer.parseUnsignedInt(paramMap.get("limit").toString());
    		Integer page =  (Num - 1) * limit ;
    		//查询关键字
    		String keyword =paramMap.get("keyword") == null ? "" : paramMap.get("keyword")  + "";
    		List<dPianqu> list = pianquService.selectdPianqu(page,limit,keyword);
            //总数
    		Integer count = pianquService.selectNums(keyword);
    		//组装消息
    		return ApiResultUtil.success(list,count);
    	}

    返回消息组装类

    
    public class ApiResultUtil {
        /**
         * 请求成功返回
         * @param object
         * @return
         */
        public static Msg success(List<?> list,int count){
            Msg msg=new Msg();
            msg.setCode(0);
            msg.setCount(count);
            msg.setMsg("");
            msg.setData(list);
            return msg;
        }
    
    
        public static Msg error(Integer code,String resultmsg){
            Msg msg=new Msg();
            msg.setCode(code);
            msg.setMsg(resultmsg);
            return msg;
        }
    
    
    }

    mabaits的 map.xml代码

       <resultMap type="dPianqu" id="dPianquResult">
            <result property="id"    column="id"    />
            <result property="pianqu"    column="pianqu"    />
            <result property="daibiaochu"    column="daibiaochu"    />
        </resultMap>
    	
    	<sql id="selectPianquVo">
            select id, pianqu, daibiaochu from aps_pianqu
        </sql>
    	   
     <select id="selectdPianqu" resultMap="dPianquResult"  >
            <include refid="selectPianquVo"/>
            <where>
            <if test="keyword != null and keyword!= ''"> and CONCAT(`pianqu`, `daibiaochu`) LIKE  concat('%',  #{keyword,jdbcType=VARCHAR}, '%')</if>
            </where>
             LIMIT  #{page,jdbcType=INTEGER} , #{limit,jdbcType=INTEGER}
        </select>

     

     

    展开全文
  • jQuery table selector jquey 表格 选择器

    千次阅读 2010-06-23 12:14:00
    jQuery("#recommandVideoTitle").html(jQuery("#video table tr:nth-child(3)").children("td:nth-child(2)").html()); 
  • 样式表格选择器

    2017-08-14 16:07:00
    选择器有/*id选择器*/#div1{} /*class选择器*/div-class /*标签选择器*/div /*属性选择器*/[sb=n1] /*复合选择器*//*并列选择器*/.c1,.c2 /*子代选择器*/c3 span /*其他*/.x1 <link type="text/css" rel=...
  • 文章目录1.... 掌握CSS的高级选择器3.1 层次选择器3.2 复合选择器3.3 属性选择器 1. 掌握表格的使用 1.1 表格的基本语法 表格是我们在日常生活用到的非常多的一种数据表现形式。 它的结构清...
  • 1.易混淆的表格问题 ...使用CSS尽可能用class样式复 用,若不合适时 再考虑使用id选择器 2)行内样式>id>类选择器>标签>通配符 > 继承 > 浏览器默认属性 3)行内样式>内部样式>外部样式 ...
  • iview可编辑表格 表格行添加输入框、选择器 表格的列定义中,在需要编辑的字段下使用render函数 Input输入框 { title: '控制器名称', key: 'conName', align: 'center', render: (h, params) => { ...
  • 选择器是指表格的选择模式SelectionModel,选择器的最大用处就是使用户能够以不同的方式选择表中的数据,例如平时处理Excel表时,可以一次性选择一个数据,也可以一次性选择多个数据等。选择器的操作方式与JList操作...
  • #表格,表单,CSS基础,选择器的权重*选择器的权重 表格 结构标签 table 声明表格 tr 行 td 列,每一个单元格 表格的基本结构: <table> <tr> <td></td> <td></td> </tr...
  • 表格、表单和高级选择器 1. 掌握表格的使用 1.1 表格的基本语法 表格是我们在日常生活用到的非常多的一种数据表现形式。 它的结构清晰、稳定、易于管理,且使用简单。 例如:工资条、后台管理系统各种数据表、考试...
  • jquery 表格样式 时间选择器表格滑过改变颜色 根据填写条件不同,做出判断并提交表单
  • CSS选择器,类选择器,id选择器,id+类选择器。 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。 优先级,id>类 2.实例 实现...
  • 今天做一个表单提交,怎么也拿不到button的选择器,不管用$(“#btn_update”)还会getElementById("btn_update"),浏览器也是谷歌没问题,后来发现是动态加载dom元素无法取值的问题。 因为表单中的表格数据是通过另一...
  • jQuery选择器设置表格

    2017-07-13 16:30:10
    表格样式如下:table { width: 300px; height: 300px; margin: auto; border: 1px solid black; border-collapse: collapse;}tr td{ border: 1px solid black; border-collapse: collapse; text-align: center;},...
  • 表格,表单和高级选择器 1.掌握表格的使用 1.1表格的基本语法 表格是我们在日常生活用到的非常多的一种数据表现形式。 它的结构清晰,稳定,易于管理,且使用简单。 例如:工资条,后台管理系统各种数据表,考试成绩...
  • Ext.grid.EditorGridPanel中用的是列选择器 if(!this.selModel){ this.selModel = new Ext.grid.CellSelectionModel(); } Ext.grid.GridPanel中用的是行选择器 getSelectionModel : function...
  • 伪类选择器表格的制作二 如图所示: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-...
  • 1. 表格 table Border 是决定边框粗细的属性 cellspacing 是单元格空间的属性 cellpadding 是单元格内部的边距的属性。 Img插入table中 会发现出现余白,怎么解决? colspan 水平合并单元格的个数 ...
  • vue 表格分页 v选择 (v-selectpage) A powerful selector for Vue2, list or table view of pagination, use tags for multiple selection, i18... 一个强大的Vue2选择器,分页列表或表格视图,使用标签进行多项选择...
  • 创建一个表格,使用类选择器来美化表格样式: 代码如下: &lt;!DOCTYPE html&gt; &lt;html&gt;  &lt;head&gt;  &lt;meta charset="utf-8" /&gt;  &lt;title&...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,033
精华内容 1,613
关键字:

表格选择器