phpcms模型管理如何支持联动菜单多选

phpcms模型管理如何支持联动菜单多选,第1张

今天也碰到了这个问题 转下小波群主的回复0793jay(小波)()23:15:17新建字段,复选框--,随意设置选项---/phpcms/templates/defualt/member/content_publishedhtml 修改 0793jay(小波)()23:15:40{loop 0793jay(小波)()23:16:48增加 {if $k=='新建复选框字段名'}<tr></th></th><td></td>{else}0793jay(小波)()23:17:32接下来,新增函数, 获取指定联动菜单名,0793jay(小波)()23:18:37函数中根据新增函数的参数进行 读取指定文件,将联动菜单数组中 ,Parentid=0 项目 遍历出。0793jay(小波)()23:19:24新增 第二个函数,参数设置 :联动菜单,父级ID0793jay(小波)()23:19:53将第二个函数,放置于 contentphp 中。便于ajax 提交方式0793jay(小波)()23:19:59新增JS 函数。0793jay(小波)()23:21:00通过 change ,触发JS函数, 进行 AJAX 异步更新 下级, 0793jay(小波)()23:22:07AJAX 返回成品内容, JQUERY 直接html 到指定ID中。 通过ctrl 键与 select 属性 ,确定返回的 成品内容是个多选框。0793jay(小波)()23:22:51进行赋值给返回 来的最后级 <select name= “”0793jay(小波)()23:23:08name 等于新增的字段名·· 。提交·保存即可黄页30号内测,估计黄页里就有这个功能了,不急的话就等等吧

“bootstrap-selectjs ”联动改变方式如下:

1、多选效果

可以设置最多只能选几个

2、图文结合的效果

3、远程搜索功能(即在用户输入搜索内容时动态去后台取数据)

输入内容前

输入空格搜索出全部

滚动条滑动到底部自动加载剩余项

输入文本动态去后台过滤

更高级的用法如:

代码示例如下:

1、多选效果

select2的多选很简单,设置一个属性就好了。

<script src="~/Scripts/jquery-1102js"></script>

<script src="~/Content/bootstrap/js/bootstrapjs"></script>

<link href="~/Content/bootstrap/css/bootstrapcss" rel="stylesheet" /> 

<script src="~/Content/select2-master/dist/js/select2js"></script>

<link href="~/Content/select2-master/dist/css/select2css" rel="stylesheet" /> <select id="sel_menu2" multiple="multiple" class="form-control">

         <optgroup label="系统设置">

              <option value="1">用户管理</option>

              <option value="2">角色管理</option>

              <option value="3">部门管理</option>

              <option value="4">菜单管理</option>

         </optgroup>

         <optgroup label="订单管理">

              <option value="5">订单查询</option>

              <option value="6">订单导入</option>

              <option value="7">订单删除</option>

              <option value="8">订单撤销</option>

         </optgroup>

         <optgroup label="基础数据">

              <option value="9">基础数据维护</option>

          </optgroup>

     </select> //多选

 $("#sel_menu2")select2({        

 tags: true,        

 maximumSelectionLength: 3  //最多能够选择的个数    });

2、图文结合的效果

<select id="sel_menu" class="js-example-templating js-states form-control">

             <optgroup label="系统设置">

                 <option value="1">用户管理</option>

                 <option value="2">角色管理</option>

                 <option value="3">部门管理</option>

                 <option value="4">菜单管理</option>

             </optgroup>

             <optgroup label="订单管理">

                 <option value="5">订单查询</option>

                 <option value="6">订单导入</option>

                 <option value="7">订单删除</option>

                 <option value="8">订单撤销</option>

             </optgroup>

             <optgroup label="基础数据">

                 <option value="9">基础数据维护</option>

             </optgroup>

         </select>$(function () {    

 //带    

 $("#sel_menu")select2({        

 templateResult: formatState,        

 templateSelection: formatState    

 });

 });

 function formatState(state) {    

 if (!stateid) { return statetext; }    

 var $state = $(      

 '<span><img src="/content/images/' + stateelementvaluetoLowerCase() + 'ico" class="img-flag" /> ' + statetext + '</span>'    

 );    

 return $state;};

3、远程搜索功能(即在用户输入搜索内容时动态去后台取数据)

<select id="sel_menu3" class="js-data-example-ajax form-control">

      <option value="3620194" selected="selected">请选择</option>

 </select>$(function () {    //远程筛选

    $("#sel_menu3")select2({

        ajax: {

            url: "/Home/GetProvinces",

            dataType: 'json',

            delay: 250,

            data: function (params) {                

            return {

                    q: paramsterm, // search term                    page: paramspage

                };

            },

            processResults: function (data, params) {

                paramspage = paramspage || 1;                

                return {

                    results: dataitems,

                    pagination: {

                        more: (paramspage  10) < datatotal_count

                    }

                };

            },

            cache: true

        },

        escapeMarkup: function (markup) { return markup; }, // let our custom formatter work

        minimumInputLength: 1,

        templateResult: formatRepoProvince, // omitted for brevity, see the source of this page

        templateSelection: formatRepoProvince // omitted for brevity, see the source of this page    });

});function formatRepoProvince(repo) {    

if (repoloading) return repotext;    

var markup = "<div>"+reponame+"</div>";    

return markup;

}

这里有要注意的一个地方就是processResults属性对应的方法有一个more属性用于是否分页显示的,这里的值要和你需要一次显示的值的条数匹配。

后台对应的方法如下:

public List<string> lstProvince = new List<string>() {"北京市","天津市","重庆市","上海市","河北省","山西省","辽宁省","吉林省","黑龙江省","江苏省","浙江省","安徽省","福建省","江西省","山东省","河南省","湖北省","湖南省","广东省","海南省","四川省","贵州省","云南省","陕西省","甘肃省","青海省","台湾省","内蒙古自治区","广西壮族自治区","西藏自治区","宁夏回族自治区","新疆维吾尔自治区","香港特别行政区","澳门特别行政区" };        

public JsonResult GetProvinces(string q, string page)

        {            

        var lstRes = new List<Province>();            

        for (var i = 0; i < 30; i++)            

        {                

        var oProvince = new Province();                

        oProvinceid = i;                

        oProvincename = lstProvince[i];                

        lstResAdd(oProvince);            

        }            

        if (!stringIsNullOrEmpty(qTrim()))            

        {                

        lstRes = lstResWhere(x => xnameContains(q))ToList();            }            

        var lstCurPageRes = stringIsNullOrEmpty(page)  lstResTake(10) : lstResSkip(ConvertToInt32(page)  10 - 10)Take(10);            

        return Json(new { items = lstCurPageRes, total_count = lstResCount }, JsonRequestBehaviorAllowGet);        }

 在JQueryMobile页面在第一次初始化进行一次整体渲染,动态生成的需要局部渲染。

在jquerymobile实现listview局部渲染的方法:

复制代码 代码如下:

function queryPublishOrderList(trackOrDealOrInsp,userCode,type,pageNum){

var queryPublishOrderListURL=">

JSP页面代码:

代码如下:

<table>

<tr>

<td width="400px" align="left">入学批次:<SELECT NAME="grade"

id="grade" onchange="refreshEduLevelAndSpecialAjax();"> //选择入学批次会刷新层次和专业

<OPTION VALUE="0">

--请选择--

<c:forEach items="${gradeInfo}" var="gradeInfo">

<OPTION VALUE="${gradeInfogradeName}">${gradeInfogradeName}

</c:forEach>

</SELECT></td>

<td width="400px" align="left">统考课程:<SELECT

NAME="uniExamCourseId" id="uniExamCourseId">

<OPTION VALUE="0">

--请选择--

<c:forEach items="${unifiedExamCourseList}" var="uniExamCourse">

<OPTION VALUE="${uniExamCourseid}">${uniExamCourseuniExamCourseName}

</c:forEach>

</SELECT></td>

</tr>

<tr>

<td colspan="2" id="refreshEduLevelAndSpecialAjax"> //设置ID,用于填充层次和专业的下拉框

<table>

<tr>

<td width="400" align="left">层 次:<SELECT

NAME="eduLevelId" id="eduLevelId"

onchange="refreshSpecialAjax();"> //选择层次后刷新专业

<OPTION VALUE="0">--请选择--</OPTION>

<c:forEach items="${educationLevel}" var="educationLevel">

<OPTION VALUE="${educationLevelid}">${educationLeveleducationLevelName}

</c:forEach>

</SELECT></td>

<td width="400" align="left" id="refreshSpecialAjax">专 业:<SELECT //设置ID,用于填充专业的下拉框

NAME="specialId" id="specialId">

<OPTION VALUE="0">--请选择--</OPTION>

<c:forEach items="${specialList}" var="special">

<OPTION VALUE="${specialid}">${specialspecialName}

</c:forEach>

</SELECT></td>

</tr>

</table>

</td>

</tr>

</table>

JS的代码如下:

代码如下:

//JavaScript Document

var xml>

以上就是关于phpcms模型管理如何支持联动菜单多选全部的内容,包括:phpcms模型管理如何支持联动菜单多选、bootstrap-select.js 怎么联动改变,例如:省份,城市二级联动。、Jquery mobile 下拉刷新 怎么弄等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/9288493.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-04-26
下一篇2023-04-26

发表评论

登录后才能评论

评论列表(0条)

    保存